标签：element center 自身 ast 处理 java 基于 方法 +=
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
直接上代码
html文件代码：
1 <html> 2 3 <head> 4 <!--设置字符格式--> 5 <meta charset="utf-8"> 6 <!--调入css样式--> 7 <link href="calc.css" rel="stylesheet"> 8 </head> 9 10 <body> 11 <div id="calculator"> 12 <div class="logo"> 13 <span class="name">JavaScript简易计算器</span> 14 <span class="verson">@温一壶清酒</span> 15 </div> 16 <div id="import"> 17 <!--screen输入栏--> 18 <div class="screen"> 19 <input type="text" id="screenName" name="screenName" class="screen"> 20 </div> 21 </div> 22 <div id="keys"> 23 <!--第一排--> 24 <input type="button" id="7" onclick="jsq(this.id)" value="7" class="buttons"> 25 <input type="button" id="8" onclick="jsq(this.id)" value="8" class="buttons"> 26 <input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons"> 27 <input type="button" id="Back" onclick="tuiGe()" value="Back" class="buttons"> 28 <input type="button" id="C" onclick="clearNum()" value="C" class="buttons" style="margin-right:0px"> 29 <!--第二排--> 30 <input type="button" id="4" onclick="jsq(this.id)" value="4" class="buttons"> 31 <input type="button" id="5" onclick="jsq(this.id)" value="5" class="buttons"> 32 <input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons"> 33 <input type="button" id="*" onclick="jsq(this.id)" value="*" class="buttons"> 34 <input type="button" id="/" onclick="jsq(this.id)" value="/" class="buttons" style="margin-right:0px"> 35 <!--第三排--> 36 <input type="button" id="1" onclick="jsq(this.id)" value="1" class="buttons"> 37 <input type="button" id="2" onclick="jsq(this.id)" value="2" class="buttons"> 38 <input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons"> 39 <input type="button" id="+" onclick="jsq(this.id)" value="+" class="buttons"> 40 <input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="margin-right:0px"> 41 <!--第四排--> 42 <input type="button" id="0" onclick="jsq(this.id)" value="0" class="buttons"> 43 <input type="button" id="00" onclick="jsq(this.id)" value="00" class="buttons"> 44 <input type="button" id="." onclick="jsq(this.id)" value="." class="buttons"> 45 <input type="button" id="%" onclick="jsq(this.id)" value="%" class="buttons"> 46 <input type="button" id="eva" onclick="eva()" value="=" class="buttons" style="margin-right:0px"> 47 </div> 48 <div class="footer"> 49 <span class="aside">欢迎使用JavaScript简易计算器</span> 50 </div> 51 </div> 52 <!--调用js文件--> 53 <script src="calc.js"></script> 54 </body> 55 56 </html>
css样式代码：
1 *{ 2 margin:0; 3 padding:0; 4 box-sizing: border-box; 5 font: 14px Arial,sans-serif; 6 } 7 html{ 8 height:100%; 9 background-color:lightslategrey; 10 } 11 12 #calculator{ 13 margin: 15px auto; 14 width:330px; 15 height:400px; 16 border: 1px solid lightgray; 17 background-color:darkgrey; 18 padding:15px; 19 } 20 21 /*logo*/ 22 .logo{ 23 height:20px; 24 25 } 26 .logo.name{ 27 float:left; 28 line-height:30px; 29 } 30 .logo.verson{ 31 float:right; 32 line-height:30px; 33 } 34 /*screen*/ 35 #import{ 36 margin-top:15px; 37 } 38 .screen{ 39 margin-top:5px; 40 width:300px; 41 height:40px; 42 text-align: right; 43 padding-right:10px; 44 font-size:20px; 45 } 46 #keys{ 47 border:1px solid lightgray; 48 height:223px; 49 margin-top:25px; 50 padding:8px; 51 } 52 #keys.last{ 53 margin-right:0px; 54 } 55 .footer{ 56 margin-top:20px; 57 height:20px; 58 text-align:center; 59 } 60 .footer .link{ 61 float:right; 62 } 63 64 #keys .buttons{ 65 float:left; 66 width: 42px; 67 height: 36px; 68 text-align:center; 69 background-color:lightgray; 70 margin: 0 17px 20px 0; 71 }
js代码：
1 var num = 0; // 定义第一个输入的数据 2 function jsq(num) { 3 //获取当前输入 4 if(num=="%"){ 5 document.getElementById(‘screenName‘).value=Math.round(document.getElementById(‘screenName‘).value)/100; 6 }else{ 7 document.getElementById(‘screenName‘).value += document.getElementById(num).value; 8 } 9 } 10 function eva() { 11 //计算输入结果 12 document.getElementById("screenName").value = eval(document.getElementById("screenName").value); 13 } 14 function clearNum() { 15 //清0 16 document.getElementById("screenName").value = null; 17 document.getElementById("screenName").focus(); 18 } 19 function tuiGe() { 20 //退格 21 var arr = document.getElementById("screenName"); 22 arr.value = arr.value.substring(0, arr.value.length - 1); 23 }
标签：element center 自身 ast 处理 java 基于 方法 +=
原文地址：http://www.cnblogs.com/hong-fithing/p/7608135.html
