- A+
所属分类：未分类
在栖迟於一丘的博客上看到了tony介绍的网页计算器，虽说是简易计算器，但是实现了计算器的大部分功能。 代码实现了页面与脚本的分离。还是挺有趣的学习一个
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>JavaScript 计算器</title> <script type="text/javascript" src="cal.js"></script> </head> <body> <hr /> <h1>JavaScript 计算器</h1> <hr /> <form id="calculator" action=""> <p><input type="text" name="box" value="0" id="result"/></p> <p> <input type="button" value="Backspace" id="backspace" /> <input type="button" value="CE" id="CE" /> <input type="button" value="C" id="C" /></p> <p> <input type="button" value=" 7 " id="num7" /> <input type="button" value=" 8 " id="num8" /> <input type="button" value=" 9 " id="num9" /><br/> <input type="button" value=" 4 " id="num4" /> <input type="button" value=" 5 " id="num5" /> <input type="button" value=" 6 " id="num6" /><br /> <input type="button" value=" 1 " id="num1" /> <input type="button" value=" 2 " id="num2" /> <input type="button" value=" 3 " id="num3" /><br /> <input type="button" value=" 0 " id="num0" /> <input type="button" value="+/-" id="sign" /> <input type="button" value=" . " id="point" /></p> <p> <input type="button" value=" + " id="add" /> <input type="button" value=" - " id="sub" /> <input type="button" value=" * " id="mul" /> <input type="button" value=" / " id="div" /><br /> <input type="button" value=" % " id="mod" /> <input type="button" value="sqrt" id="sqrt" /> <input type="button" value="1/x" id="recip" /> <input type="button" value=" = " id="calculate" /></p> </form> <hr /> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 | var CalRslt=0; var opertr; function Calc() { if(opertr=="+"){ CalRslt=CalRslt+eval(document.getElementById("result").value);} else if(opertr=="-"){ CalRslt=CalRslt-eval(document.getElementById("result").value);} else if(opertr=="*"){ CalRslt=CalRslt*eval(document.getElementById("result").value);} else if(opertr=="/"){ CalRslt=CalRslt/eval(document.getElementById("result").value);} else if(opertr=="%"){ CalRslt=CalRslt%eval(document.getElementById("result").value);} else if(opertr=="$"){ CalRslt=1/eval(document.getElementById("result").value); document.getElementById("result").value=CalRslt;} else if(opertr=="s"){ CalRslt=CalRslt*CalRslt; document.getElementById("result").value=CalRslt;} else CalRslt=eval(document.getElementById("result").value); } function dispCal(t) { if(t=="="){ Calc(); document.getElementById("result").value=CalRslt; opertr="";} else if(t=="+"){ Calc(); document.getElementById("result").value=""; opertr="+";} else if(t=="-"){ Calc(); document.getElementById("result").value=""; opertr="-";} else if(t=="*"){ Calc(); document.getElementById("result").value=""; opertr="*";} else if(t=="/"){ Calc(); document.getElementById("result").value=""; opertr="/";} else if(t=="%"){ Calc(); document.getElementById("result").value=""; opertr="%";} else if(t=="$"){ Calc(); opertr="$"; Calc(); opertr="="} else if(t=="s"){ Calc(); opertr="s"; Calc(); opertr="="} else document.getElementById("result").value=document.getElementById("result").value+t; } function init(){ num0 = document.getElementById("num0"); num1 = document.getElementById("num1"); num2 = document.getElementById("num2"); num3 = document.getElementById("num3"); num4 = document.getElementById("num4"); num5 = document.getElementById("num5"); num6 = document.getElementById("num6"); num7 = document.getElementById("num7"); num8 = document.getElementById("num8"); num9 = document.getElementById("num9"); sadd = document.getElementById("add"); ssub = document.getElementById("sub"); smul = document.getElementById("mul"); sdiv = document.getElementById("div"); smod = document.getElementById("mod"); ssqrt = document.getElementById("sqrt"); srecip = document.getElementById("recip"); scalculate = document.getElementById("calculate"); spoint = document.getElementById("point"); ssign = document.getElementById("sign"); backspace=document.getElementById("backspace"); CE=document.getElementById("CE"); C=document.getElementById("C"); ssign.onclick=function(){ var x=-1*eval(document.getElementById("result").value); document.getElementById("result").value=x; }; C.onclick=function(){ document.getElementById("result").value=0; }; CE.onclick=function(){ document.getElementById("result").value=0; CalRslt=0; opertr=""; }; backspace.onclick=function(){ var s=document.getElementById("result").value; s=s.substr(0, s.length-1); document.getElementById("result").value=s; }; spoint.onclick=function(){ document.getElementById("result").value=document.getElementById("result").value+'.'; }; num0.onclick=function(){ dispCal(0); }; num1.onclick=function(){ dispCal(1); }; num2.onclick=function(){ dispCal(2); }; num3.onclick=function(){ dispCal(3); }; num4.onclick=function(){ dispCal(4); }; num5.onclick=function(){ dispCal(5); }; num6.onclick=function(){ dispCal(6); }; num7.onclick=function(){ dispCal(7); }; num8.onclick=function(){ dispCal(8); }; num9.onclick=function(){ dispCal(9); }; sadd.onclick=function(){ dispCal('+'); }; ssub.onclick=function(){ dispCal('-'); }; smul.onclick=function(){ dispCal('*'); }; sdiv.onclick=function(){ dispCal('/'); }; scalculate.onclick=function(){ dispCal('='); }; ssqrt.onclick=function(){ dispCal('s'); }; smod.onclick=function(){ dispCal('%'); }; srecip.onclick=function(){ dispCal('$'); }; } window.onload=init; // init为自定义的初始化函数，我们让它在文档加载完后立即执行 |
我的微信公众号
我的微信公众号扫一扫
