|
|
步骤
1
:
练习-计算器
步骤
2
:
html部分
步骤
3
:
完成该练习需要的其他知识
步骤
4
:
答案-计算器
");
window.frames["iframe_show2099"].document.write(decodeHtml($("textarea#stepcodeTextarea2099").val()));
window.frames["iframe_show2099"].document.close();
$(window.frames["iframe_show2099"]).load(function(){
$("#iframe_show2099").height($("#iframe_show2099").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2099").height($("#iframe_show2099").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<style>
input{
width:50px;
}
</style>
<script>
function calc(){
var num1= document.getElementById("num1").value;
var num2= document.getElementById("num2").value;
num1 = parseFloat(num1);
num2 = parseFloat(num2);
var result = num1+num2;
document.getElementById("result").value=result;
}
</script>
<input type="text" id="num1" value="1"> +
<input type="text" id="num2" value="2" >
=
<input type="text" id="result" >
<input type="button" value="运算" onclick="calc()">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<style>
input{
width:50px;
}
</style>
<script>
function calc(){
var num1= document.getElementById("num1").value;
var num2= document.getElementById("num2").value;
num1 = parseFloat(num1);
num2 = parseFloat(num2);
var result = num1+num2;
document.getElementById("result").value=result;
}
</script>
<input type="text" id="num1" value="1"> +
<input type="text" id="num2" value="2" >
=
<input type="text" id="result" >
<input type="button" value="运算" onclick="calc()">
");
window.frames["iframe2099"].document.write(decodeHtml(code2099));
window.frames["iframe2099"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2099"]).load(function(){
$("#iframe2099").height($("#iframe2099").contents().find("body").height()+showittryitheight);
});
$("#iframe2099").height($("#iframe2099").contents().find("body").height()+showittryitheight);
alreadyWriteCode2099 = code2099;
$("#rendering2099").hide();
$("#rendered2099").show();
}
var tRereshRetry2DemoPanel2099 = setInterval(rereshRetry2DemoPanel2099,1000);
var binded2099 = false;
$("textarea#stepcodeTextarea2099").keyup(function(){
if(!binded2099){
$(window).bind('beforeunload',function(){
binded2099 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2099 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2099!=newCode){
// window.frames["iframe2099"].document.write("
");
// window.frames["iframe2099"].document.write(decodeHtml($("textarea#stepcodeTextarea2099").val()));
// window.frames["iframe2099"].document.close();
// $(window.frames["iframe2099"]).load(function(){
// $("#iframe2099").height($("#iframe2099").contents().find("body").height()+showittryitheight);
// });
// code2099 = newCode;
// }
});
$(".tryButton2099").click(function(){
$("#tryDiv2099").show();
$("#stepcodeTextarea2099").focus();
$("#stepcodeTextarea2099").height(200);
$("#iframe2099").height(0);
window.frames["iframe2099"].document.write("
");
window.frames["iframe2099"].document.write(decodeHtml($("textarea#stepcodeTextarea2099").val()));
window.frames["iframe2099"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2099"]).load(function(){
$("#iframe2099").height($("#iframe2099").contents().find("body").height()+showittryitheight);
});
$("#iframe2099").height($("#iframe2099").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2099.focus();
editor2099.setSize(null, "250");
$("#rendering2099").hide();
$("#rendered2099").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2099 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2099"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2099.on("change",function(doc){
if(!binded2099){
$(window).bind('beforeunload',function(){
binded2099 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2099 = newCode;
$("textarea#stepcodeTextarea2099").val(newCode);
if(alreadyWriteCode2099!=code2099){
lastModifedTime2099 = new Date().getTime();
$("#rendering2099").show();
$("#rendered2099").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2099 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2099.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2099").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
使用html和css做出如图所示的加法计算器的界面
界面部分的参考答案在右侧的UI.html
为了完成该练习，还需要一小撮 DOM的知识 如何从input中取值:
var value = document.getElementById("num1").value;
以及如何把数值放回input中
document.getElementById("result").value=value;
");
window.frames["iframe_show2097"].document.write(decodeHtml($("textarea#stepcodeTextarea2097").val()));
window.frames["iframe_show2097"].document.close();
$(window.frames["iframe_show2097"]).load(function(){
$("#iframe_show2097").height($("#iframe_show2097").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2097").height($("#iframe_show2097").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script>
function get(){
var value = document.getElementById("num1").value;
document.getElementById("result").value="从num1中取到的值:"+value;
}
</script>
<input type="text" id="num1" value="1">
<br>
<input type="text" id="result" value="">
<br>
<input type="button" value="取值" onclick="get()" >
<script>
function get(){
var value = document.getElementById("num1").value;
document.getElementById("result").value="从num1中取到的值:"+value;
}
</script>
<input type="text" id="num1" value="1">
<br>
<input type="text" id="result" value="">
<br>
<input type="button" value="取值" onclick="get()" >
");
window.frames["iframe2097"].document.write(decodeHtml(code2097));
window.frames["iframe2097"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2097"]).load(function(){
$("#iframe2097").height($("#iframe2097").contents().find("body").height()+showittryitheight);
});
$("#iframe2097").height($("#iframe2097").contents().find("body").height()+showittryitheight);
alreadyWriteCode2097 = code2097;
$("#rendering2097").hide();
$("#rendered2097").show();
}
var tRereshRetry2DemoPanel2097 = setInterval(rereshRetry2DemoPanel2097,1000);
var binded2097 = false;
$("textarea#stepcodeTextarea2097").keyup(function(){
if(!binded2097){
$(window).bind('beforeunload',function(){
binded2097 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2097 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2097!=newCode){
// window.frames["iframe2097"].document.write("
");
// window.frames["iframe2097"].document.write(decodeHtml($("textarea#stepcodeTextarea2097").val()));
// window.frames["iframe2097"].document.close();
// $(window.frames["iframe2097"]).load(function(){
// $("#iframe2097").height($("#iframe2097").contents().find("body").height()+showittryitheight);
// });
// code2097 = newCode;
// }
});
$(".tryButton2097").click(function(){
$("#tryDiv2097").show();
$("#stepcodeTextarea2097").focus();
$("#stepcodeTextarea2097").height(200);
$("#iframe2097").height(0);
window.frames["iframe2097"].document.write("
");
window.frames["iframe2097"].document.write(decodeHtml($("textarea#stepcodeTextarea2097").val()));
window.frames["iframe2097"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2097"]).load(function(){
$("#iframe2097").height($("#iframe2097").contents().find("body").height()+showittryitheight);
});
$("#iframe2097").height($("#iframe2097").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2097.focus();
editor2097.setSize(null, "250");
$("#rendering2097").hide();
$("#rendered2097").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2097 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2097"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2097.on("change",function(doc){
if(!binded2097){
$(window).bind('beforeunload',function(){
binded2097 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2097 = newCode;
$("textarea#stepcodeTextarea2097").val(newCode);
if(alreadyWriteCode2097!=code2097){
lastModifedTime2097 = new Date().getTime();
$("#rendering2097").show();
$("#rendered2097").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2097 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2097.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2097").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
Or
姿势不对,事倍功半!
