用javascript实现计算器功能的方法:【function init(){ var num=document.getElementById(num); num.value=0; var btn_num1; var fh; ...】。
本文操作环境:windows10系统、javascript 1.8.5、thinkpad t480电脑。
想必大家在学习编程语言的过程中都曾写过计算器功能,比如使用PHP、java、python等语言。那么你有没有使用过javascript实现过计算器功能呢?其实原理都是一样的,让我们一起来看看吧!
<!DOCTYPE html> <html> <head> <title>js计算器</title> <link rel=stylesheet type=text/csshref=index.css> <script type=text/javascript src=index.js> </script> </head> <body onload=init()> <!-- 1个文本框10个数字....20个按钮 --> <div id=div1> <form action=> <div id=div2> <input type=text name=num disabled=disabled id=num value=0> </div> </form> <div id=div3> <input type=button name= value=C id=baidu> <input type=button name= value=← id=> <input type=button name= value=+/- id=> <input type=button name= value=/ id=> <input type=button name= value=7 id=> <input type=button name= value=8 id=> <input type=button name= value=9 id=> <input type=button name= value=* id=> <input type=button name= value=4 id=> <input type=button name= value=5 id=> <input type=button name= value=6 id=> <input type=button name= value=- id=> <input type=button name= value=1 id= > <input type=button name= value=2 id= > <input type=button name= value=3 id= > <input type=button name= value=+ id=> <input type=button name= value=0 id=> <input type=button name= value== id=> <input type=button name= value=. id=> <input type=button name= value=AC id=> </div> </div> </body> </html>`
JS代码:
function init(){ var num=document.getElementById(num); num.value=0; var btn_num1; var fh; num.disabled=disabled; // var n1=document.getElementById(n1); // n1.οnclick=function(){ // } var oButton=document.getElementsByTagName(input); for(var i=0;i<oButton.length;i++){ oButton[i].onclick=function(){ if(isnumber(this.value)){ //num.value=(num.value+this.value)*1;//把默认0消除 if(isNull(num.value)){ num.value=this.value; }else{ num.value=num.value+this.value; } }else{ //测试功能是否正确 // alert(bushishuzi) var btn_num=this.value; //测试功能是否正确(弹窗) // alert(btn_num); switch(btn_num){ case +: // alert(11); btn_num1=num.value*1;//=parseInt(num.value)这个也可以,后面的话需要改为number num.value=0; fh=+; break; case -: btn_num1=num.value*1; num.value=0; fh=-; break; case *: btn_num1=num.value*1; num.value=0; fh=*; break; case /: btn_num1=num.value*1; num.value=0; fh=/; break; case .: num.value=dec_number(num.value); break; case ←: num.value=back(num.value); break; case +/-: num.value=sign(num.value); break; case AC: num.value=0; break; case C: init_baidu(); break; case =: switch(fh){ case+: num.value=btn_num1+num.value*1; break; case-: num.value=btn_num1-num.value*1; break; case*: num.value=btn_num1*num.value*1; break; case/: if(num.value==0){ num.value=0; alert(除数不能为0); }else{ num.value=btn_num1/num.value*1; } break; } break; } } } } } //小数点的功能 function dec_number(n){ if(n.indexOf(.)==-1){ n=n+.; } return n; } //验证文本框是否为空或者为0 function isNull(n){ if(n*1==0||n.length==0){ return true; }else{ return false; } } //退位键 function back(n){ n=n.substr(0,n.length-1); if(isNull(n)){ n=0; } return n; } //正负号+/- function sign(n){ if(n.indexOf(-)==-1){ n=-+n; }else{ n=n.substr(1,n.length); } return n; } //isNaN:不能转换成数字:true,可以转换成数字是false function isnumber(n){ return !isNaN(n); } //C按钮使用一个超级链接,链接到百度,这个可以随便发挥 function init_baidu(){ window.location.href=http://www.baidu.com; }
CSS代码:
*{ margin:0px; padding:0px; } div{ width:170px; } #div1{ top:60px; left: 100px; position:absolute; } input[type=button]{ width:30px; margin-right: 5px; } input[type=text]{ width:147px; text-align: right; background-color:white; border:1px solid; padding-right:1px; Box-sizing:content-Box; } input[type=button]:hover{/*//伪类和按钮的使用*/ background-color:white; border:1px solid; }
推荐学习:javascript视频教程
原文地址:https://www.jb51.cc/js/1203913.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。