js练习计算器
2019-04-30 23:40:02来源:博客园 阅读 ()
js练习计算器,支持鼠标点击、键盘操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>计算器2.2</title> </head> <body> <input id="a1" disabled="disabled" /> <input id="a2" disabled="disabled" /> <input id="a3" disabled="disabled" /> <p id="counter"></p> <script type="text/javascript"> function addnum(id) { b2 = document.getElementById("a2").value; if(!b2){ document.getElementById("a1").value += id; }else{ document.getElementById("a3").value += id; } } function addtype(id) { b1 = document.getElementById("a1").value; if(!b1){ alert("请输入数字1"); return false; } if(id=='*'){ type = '×'; }else if(id=='/'){ type = '÷'; }else{ type = id; } document.getElementById("a2").value = type; } function backspace() { b1 = document.getElementById("a1").value; b2 = document.getElementById("a2").value; b3 = document.getElementById("a3").value; if(b3){ b3 = b3.substring(0,b3.length-1); document.getElementById("a3").value = b3; }else if(b2){ b2 = b2.substring(0,b2.length-1); document.getElementById("a2").value = b2; }else if(b1){ b1 = b1.substring(0,b1.length-1); document.getElementById("a1").value = b1; } } function clean() { document.getElementById("a1").value=""; document.getElementById("a2").value=""; document.getElementById("a3").value=""; } function suan() { var b1 = document.getElementById("a1").value; var b2 = document.getElementById("a2").value; if(b2=="×"){ b2 = "*"; }else if(b2=="÷"){ b2 = '/'; } var b3 = document.getElementById("a3").value; var bbb = new Array(["+"],["-"],["*"],["/"]); if(!b1){ alert("请输入数字1"); return false; } if(b2!=bbb[0] && b2!=bbb[1] && b2!=bbb[2] && b2!=bbb[3]){ alert("请输入运算符"); return false; } if(!b3){ alert("请输入数字2"); return false; } if(b2==bbb[0]){ var b4=Number(b1)+Number(b3); } else if(b2==bbb[1]){ var b4=Number(b1)-Number(b3); } else if(b2==bbb[2]){ //js乘法不精确会有很多小数点,整体乘一个数再除去它 b1 = Number(b1)*10000; b3 = Number(b3)*10000; b4=b1*b3/100000000; b1 = b1/10000; b3 = b3/10000; } else if(b2==bbb[3]){ if(b3==0){ b4="[除数不能为零]"; }else{ b4 = Math.round(Number(b1)/Number(b3)); var b5=Number(b1)%Number(b3); b4=b4+" 余数"+b5; } } if(b2=="*"){ b2 = "×"; }else if(b2=="/"){ b2 = '÷'; } document.getElementById("counter").innerHTML = b1+b2+b3+"="+b4; document.getElementById("a1").value=""; document.getElementById("a2").value=""; document.getElementById("a3").value=""; } //keyCode对应键位 keyarr = new Array() //数字 keyarr[48] = keyarr[96] = "0"; keyarr[49] = keyarr[97] = 1; keyarr[50] = keyarr[98] = 2; keyarr[51] = keyarr[99] = 3; keyarr[52] = keyarr[100] = 4; keyarr[53] = keyarr[101] = 5; keyarr[54] = keyarr[102] = 6; keyarr[55] = keyarr[103] = 7; keyarr[56] = keyarr[104] = 8; keyarr[57] = keyarr[105] = 9; keyarr[110] = keyarr[190] = "."; //运算符 keyarr[107] = "+"; keyarr[109] = "-"; keyarr[106] = "*"; keyarr[111] = "/"; //退格 keyarr[8] = "backspace"; //结果 keyarr[13] = "="; /*键盘事件*/ var isPiss = 0; document.onkeydown = function(event) { var e = event || window.event || arguments.callee.caller.arguments[0]; id = keyarr[e.keyCode]; if(id){ if(id=="+" || id=="-" || id=="*" || id=="/"){ //运算 addtype(id); }else if(id=="backspace"){ //退格 backspace(); }else if(id=="="){ //结果 suan(); }else{ //输入数字 addnum(id); } } }; </script> <style> .clear {clear:both; height:0 !important; width:0 !important; overflow:hidden; font-size:0;} .jisuanqi {width:303px; height:450px; background:#000; overflow:hidden; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; font-family:"Microsoft Yahei";} .jrow {padding-bottom:5px;} .num, .type {width:72px; height:86px; overflow:hidden; line-height:86px; text-align:center; float:left; color:#fff; font-size:38px; cursor:pointer;} .num {background:#343432; margin-right:5px;} .num:active {background:#181818;} .type {background:#181818;} .type:active {background:#343432;} .clean, .backspace {width:149px; height:86px; overflow:hidden; line-height:86px; text-align:center; color:#fff; font-size:38px; cursor:pointer;} .clean {background:#343432; float:left;} .clean:active {background:#181818;} .backspace {background:#181818; float:right;} .backspace:active {background:#343432;} </style> <div class="jisuanqi"> <div class="jrow"> <div class="num" onclick="addnum(7)">7</div> <div class="num" onclick="addnum(8)">8</div> <div class="num" onclick="addnum(9)">9</div> <div class="type" onclick="addtype('/')">÷</div> <div class="clear"></div> </div> <div class="jrow"> <div class="num" onclick="addnum(4)">4</div> <div class="num" onclick="addnum(5)">5</div> <div class="num" onclick="addnum(6)">6</div> <div class="type" onclick="addtype('*')">×</div> <div class="clear"></div> </div> <div class="jrow"> <div class="num" onclick="addnum(1)">1</div> <div class="num" onclick="addnum(2)">2</div> <div class="num" onclick="addnum(3)">3</div> <div class="type" onclick="addtype('-')">-</div> <div class="clear"></div> </div> <div class="jrow"> <div class="num" onclick="addnum('.')">.</div> <div class="num" onclick="addnum(0)">0</div> <div class="num" onclick="suan()">=</div> <div class="type" onclick="addtype('+')">+</div> <div class="clear"></div> </div> <div class="jrow"> <div class="clean" onclick="clean()">C</div> <div class="backspace" onclick="backspace()">←</div> <div class="clear"></div> </div> </div> </body> </html>
原文链接:https://www.cnblogs.com/ovsexia/p/10796436.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 2020前端练习 —— 超级无敌简易版博客园 2020-05-14
- Bootstrap4 表格练习 2020-04-15
- Bootstrap4网格系统+文字排版+颜色 简单练习 2020-04-14
- HTML连载80-多重背景图片及其练习 2020-04-05
- 练习中的零碎知识-CSS篇 2020-03-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash