how2j.cn

相关下载
文件名 文件大小
UI.html 947b
步骤 1 : 本练习的效果   
步骤 2 : 复利公式   
步骤 3 : html部分   
步骤 4 : 答案   

步骤 1 :

本练习的效果

"); window.frames["iframe_show2101"].document.write(decodeHtml($("textarea#stepcodeTextarea2101").val())); window.frames["iframe_show2101"].document.close(); $(window.frames["iframe_show2101"]).load(function(){ $("#iframe_show2101").height($("#iframe_show2101").contents().find("body").height()+showittryitheight); }); $("#iframe_show2101").height($("#iframe_show2101").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
<style> table{ border-collapse:collapse; } td{ border:1px silver solid; padding: 5px; font-size:12px; } input{ width:180px; } </style> <script> /*取幂函数*/ function p(base, power){ if(1==power) return base if(0==power) return 0; var result = base; for(var i = 0; i<power-1; i++){ result = result*base; } return result; } /*取复利*/ function fuli(rate, year){ var result = 0; for(var i=year;i>0;i--){ result+=p(rate,i); } return result; } function calc(){ var initMoney= getIntValue("initMoney"); var rate= getIntValue("rate"); var year= getIntValue("year"); var each= getIntValue("each"); var sum1 = (year-1)*each+initMoney; var sum3=each* fuli( (1+rate/100),(year-1)) + initMoney*p( (1+rate/100) ,year); var sum2 = sum3-sum1; setValue("sum1",sum1); setValue("sum2",sum2); setValue("sum3",sum3); } function setValue(id,value){ document.getElementById(id).value=value; } function getIntValue(id){ return parseInt(document.getElementById(id).value); } </script> <table> <tr> <td>起始资金</td> <td><input type="text" id="initMoney" value='10000'> ¥</td> <tr> <td>每年收益</td> <td><input type="text" id="rate" value='5'> %</td> </tr> <tr> <td>复利年数</td> <td><input type="text" id="year" value='10'> 年</td> </tr> <tr> <td>每年追加资金</td> <td><input type="text" id="each" value='10000'> ¥</td> </tr> <tr> <td colspan="2" align="center"><input type="button" value="计算" onclick="calc()"></td> </tr> <tr> <td>本金和</td> <td><input type="text" id="sum1" disabled="disabled" value='0'> ¥</td> </tr> <tr> <td>利息和</td> <td><input type="text" id="sum2" disabled="disabled" value='0'> ¥</td> </tr> <tr> <td>本息和</td> <td><input type="text" id="sum3" disabled="disabled" value='0'> ¥</td> </tr> </table>
"); window.frames["iframe2101"].document.write(decodeHtml(code2101)); window.frames["iframe2101"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2101"]).load(function(){ $("#iframe2101").height($("#iframe2101").contents().find("body").height()+showittryitheight); }); $("#iframe2101").height($("#iframe2101").contents().find("body").height()+showittryitheight); alreadyWriteCode2101 = code2101; $("#rendering2101").hide(); $("#rendered2101").show(); } var tRereshRetry2DemoPanel2101 = setInterval(rereshRetry2DemoPanel2101,1000); var binded2101 = false; $("textarea#stepcodeTextarea2101").keyup(function(){ if(!binded2101){ $(window).bind('beforeunload',function(){ binded2101 = true; return "xxxx"; }); } var newCode = $(this).val() code2101 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code2101!=newCode){ // window.frames["iframe2101"].document.write("
"); // window.frames["iframe2101"].document.write(decodeHtml($("textarea#stepcodeTextarea2101").val())); // window.frames["iframe2101"].document.close(); // $(window.frames["iframe2101"]).load(function(){ // $("#iframe2101").height($("#iframe2101").contents().find("body").height()+showittryitheight); // }); // code2101 = newCode; // } }); $(".tryButton2101").click(function(){ $("#tryDiv2101").show(); $("#stepcodeTextarea2101").focus(); $("#stepcodeTextarea2101").height(200); $("#iframe2101").height(0); window.frames["iframe2101"].document.write("
"); window.frames["iframe2101"].document.write(decodeHtml($("textarea#stepcodeTextarea2101").val())); window.frames["iframe2101"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2101"]).load(function(){ $("#iframe2101").height($("#iframe2101").contents().find("body").height()+showittryitheight); }); $("#iframe2101").height($("#iframe2101").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor2101.focus(); editor2101.setSize(null, "250"); $("#rendering2101").hide(); $("#rendered2101").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 editor2101 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2101"), { 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); } } }); editor2101.on("change",function(doc){ if(!binded2101){ $(window).bind('beforeunload',function(){ binded2101 = true; return "xxxx"; }); } var newCode = doc.getValue(); code2101 = newCode; $("textarea#stepcodeTextarea2101").val(newCode); if(alreadyWriteCode2101!=code2101){ lastModifedTime2101 = new Date().getTime(); $("#rendering2101").show(); $("#rendered2101").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor2101 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor2101.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv2101").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 2 :

复利公式

复利公式:
F = p* ( (1+r)^n );
F 最终收入
p 本金
r 年利率
n 存了多少年

假设情景一:
p = 10000
r = 0.05
n = 1

解读:
本金是10000
年利率是5%
存了一年 1次
复利收入 10000*( (1+0.05)^1 ) = 10500

假设情景二:
p = 10000
r = 0.05
n = 2

解读:
本金是10000
年利率是5%
存了两年
复利收入 10000*( (1+0.05)^2 ) = 11025
步骤 3 :

html部分

"); window.frames["iframe_show2102"].document.write(decodeHtml($("textarea#stepcodeTextarea2102").val())); window.frames["iframe_show2102"].document.close(); $(window.frames["iframe_show2102"]).load(function(){ $("#iframe_show2102").height($("#iframe_show2102").contents().find("body").height()+showittryitheight); }); $("#iframe_show2102").height($("#iframe_show2102").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<style> table{ border-collapse:collapse; } td{ border:1px silver solid; padding: 5px; font-size:12px; } input{ width:80px; } </style> <table> <tr> <td>起始资金</td> <td><input type="text" id="initMoney" value='0'> ¥</td> <tr> <td>每年收益</td> <td><input type="text" id="rate" value='0'> %</td> </tr> <tr> <td>复利年数</td> <td><input type="text" id="year" value='1'> 年</td> </tr> <tr> <td>每年追加资金</td> <td><input type="text" id="each" value='0'> ¥</td> </tr> <tr> <td colspan="2" align="center"><input type="button" value="计算" ></td> </tr> <tr> <td>本金和</td> <td><input type="text" id="sum1" disabled="disabled" value='0'> ¥</td> </tr> <tr> <td>利息和</td> <td><input type="text" id="sum2" disabled="disabled" value='0'> ¥</td> </tr> <tr> <td>本息和</td> <td><input type="text" id="sum3" disabled="disabled" value='0'> ¥</td> </tr> </table>
"); window.frames["iframe2102"].document.write(decodeHtml(code2102)); window.frames["iframe2102"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2102"]).load(function(){ $("#iframe2102").height($("#iframe2102").contents().find("body").height()+showittryitheight); }); $("#iframe2102").height($("#iframe2102").contents().find("body").height()+showittryitheight); alreadyWriteCode2102 = code2102; $("#rendering2102").hide(); $("#rendered2102").show(); } var tRereshRetry2DemoPanel2102 = setInterval(rereshRetry2DemoPanel2102,1000); var binded2102 = false; $("textarea#stepcodeTextarea2102").keyup(function(){ if(!binded2102){ $(window).bind('beforeunload',function(){ binded2102 = true; return "xxxx"; }); } var newCode = $(this).val() code2102 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code2102!=newCode){ // window.frames["iframe2102"].document.write("
"); // window.frames["iframe2102"].document.write(decodeHtml($("textarea#stepcodeTextarea2102").val())); // window.frames["iframe2102"].document.close(); // $(window.frames["iframe2102"]).load(function(){ // $("#iframe2102").height($("#iframe2102").contents().find("body").height()+showittryitheight); // }); // code2102 = newCode; // } }); $(".tryButton2102").click(function(){ $("#tryDiv2102").show(); $("#stepcodeTextarea2102").focus(); $("#stepcodeTextarea2102").height(200); $("#iframe2102").height(0); window.frames["iframe2102"].document.write("
"); window.frames["iframe2102"].document.write(decodeHtml($("textarea#stepcodeTextarea2102").val())); window.frames["iframe2102"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2102"]).load(function(){ $("#iframe2102").height($("#iframe2102").contents().find("body").height()+showittryitheight); }); $("#iframe2102").height($("#iframe2102").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor2102.focus(); editor2102.setSize(null, "250"); $("#rendering2102").hide(); $("#rendered2102").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 editor2102 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2102"), { 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); } } }); editor2102.on("change",function(doc){ if(!binded2102){ $(window).bind('beforeunload',function(){ binded2102 = true; return "xxxx"; }); } var newCode = doc.getValue(); code2102 = newCode; $("textarea#stepcodeTextarea2102").val(newCode); if(alreadyWriteCode2102!=code2102){ lastModifedTime2102 = new Date().getTime(); $("#rendering2102").show(); $("#rendered2102").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor2102 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor2102.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv2102").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 4 :

答案

"); window.frames["iframe_show2103"].document.write(decodeHtml($("textarea#stepcodeTextarea2103").val())); window.frames["iframe_show2103"].document.close(); $(window.frames["iframe_show2103"]).load(function(){ $("#iframe_show2103").height($("#iframe_show2103").contents().find("body").height()+showittryitheight); }); $("#iframe_show2103").height($("#iframe_show2103").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<style> table{ border-collapse:collapse; } td{ border:1px silver solid; padding: 5px; font-size:12px; } input{ width:180px; } </style> <script> /*取幂函数*/ function p(base, power){ if(1==power) return base if(0==power) return 1; var result = base; for(var i = 0; i<power-1; i++){ result = result*base; } return result; } /*取复利*/ function fuli(rate, year){ var result = 0; for(var i=year;i>0;i--){ result+=p(rate,i); } return result; } function calc(){ var initMoney= getIntValue("initMoney"); var rate= getIntValue("rate"); var year= getIntValue("year"); var each= getIntValue("each"); var sum1 = (year-1)*each+initMoney; var sum3=each* fuli( (1+rate/100),(year-1)) + initMoney*p( (1+rate/100) ,year); var sum2 = sum3-sum1; setValue("sum1",sum1); setValue("sum2",sum2); setValue("sum3",sum3); } function setValue(id,value){ document.getElementById(id).value=value; } function getIntValue(id){ return parseInt(document.getElementById(id).value); } </script> <table> <tr> <td>起始资金</td> <td><input type="text" id="initMoney" value='10000'> ¥</td> <tr> <td>每年收益</td> <td><input type="text" id="rate" value='5'> %</td> </tr> <tr> <td>复利年数</td> <td><input type="text" id="year" value='10'> 年</td> </tr> <tr> <td>每年追加资金</td> <td><input type="text" id="each" value='10000'> ¥</td> </tr> <tr> <td colspan="2" align="center"><input type="button" value="计算" onclick="calc()"></td> </tr> <tr> <td>本金和</td> <td><input type="text" id="sum1" disabled="disabled" value='0'> ¥</td> </tr> <tr> <td>利息和</td> <td><input type="text" id="sum2" disabled="disabled" value='0'> ¥</td> </tr> <tr> <td>本息和</td> <td><input type="text" id="sum3" disabled="disabled" value='0'> ¥</td> </tr> </table>
"); window.frames["iframe2103"].document.write(decodeHtml(code2103)); window.frames["iframe2103"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2103"]).load(function(){ $("#iframe2103").height($("#iframe2103").contents().find("body").height()+showittryitheight); }); $("#iframe2103").height($("#iframe2103").contents().find("body").height()+showittryitheight); alreadyWriteCode2103 = code2103; $("#rendering2103").hide(); $("#rendered2103").show(); } var tRereshRetry2DemoPanel2103 = setInterval(rereshRetry2DemoPanel2103,1000); var binded2103 = false; $("textarea#stepcodeTextarea2103").keyup(function(){ if(!binded2103){ $(window).bind('beforeunload',function(){ binded2103 = true; return "xxxx"; }); } var newCode = $(this).val() code2103 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code2103!=newCode){ // window.frames["iframe2103"].document.write("
"); // window.frames["iframe2103"].document.write(decodeHtml($("textarea#stepcodeTextarea2103").val())); // window.frames["iframe2103"].document.close(); // $(window.frames["iframe2103"]).load(function(){ // $("#iframe2103").height($("#iframe2103").contents().find("body").height()+showittryitheight); // }); // code2103 = newCode; // } }); $(".tryButton2103").click(function(){ $("#tryDiv2103").show(); $("#stepcodeTextarea2103").focus(); $("#stepcodeTextarea2103").height(200); $("#iframe2103").height(0); window.frames["iframe2103"].document.write("
"); window.frames["iframe2103"].document.write(decodeHtml($("textarea#stepcodeTextarea2103").val())); window.frames["iframe2103"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2103"]).load(function(){ $("#iframe2103").height($("#iframe2103").contents().find("body").height()+showittryitheight); }); $("#iframe2103").height($("#iframe2103").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor2103.focus(); editor2103.setSize(null, "250"); $("#rendering2103").hide(); $("#rendered2103").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 editor2103 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2103"), { 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); } } }); editor2103.on("change",function(doc){ if(!binded2103){ $(window).bind('beforeunload',function(){ binded2103 = true; return "xxxx"; }); } var newCode = doc.getValue(); code2103 = newCode; $("textarea#stepcodeTextarea2103").val(newCode); if(alreadyWriteCode2103!=code2103){ lastModifedTime2103 = new Date().getTime(); $("#rendering2103").show(); $("#rendered2103").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor2103 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor2103.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv2103").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


关于 前端部分-JavaScript-阶段性练习3 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 620943819
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图