javascript模拟实现计算器
本文实例为大家分享了javascript模拟实现计算器的具体代码，供大家参考，具体内容如下
功能:
1、实现单击按钮录入数字2、实现基础四则运算功能，并添加必要的异常处理。3、实现小数点功能并添加异常处理：小数点只能出现一次4、实现正负号功能5、实现退位功能，已经是最后一位时，显示框显示为06、AC清屏功能
使用的知识点:
1、利用大量的自定义函数实现业务逻辑2、灵活运用事件及事件处理3、培养异常处理的编程方法4、培养并实践利用不同思路实现编程
综合练习的目的:
1、将css,html和js有效的进行技术组合，实现业务功能2、锻炼和培养编程思想，解决问题的能力和方法3、锻炼和培养利用多种编程思路，完成预先设定的目标
而且最近刚上手js，感觉特别有趣，学习java基础的时候没有那么大的兴趣。感觉刚一上手js感觉特别好玩有趣，在这里把一个简单的计算器源码展示出来：
html页面：
<!DOCTYPE html><html><head> <title>js计算器</title><link rel='stylesheet' type='text/css'href='https://www.haobala.com/bcjs/index.css' ><script type='text/javascript' src='https://www.haobala.com/bcjs/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' 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;}//验证文本框是否为空或者为0function 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,可以转换成数字是falsefunction 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;}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. Java实现Windows计算器界面2. IDEA 程序包不存在,找不到符号但是明明存在对应的jar包(问题分析及解决方案)3. python与pycharm有何区别4. IDEA 2020.1 版自动导入MAVEN依赖的方法(新版MAVEN无法自动导入/更新POM依赖、MAVEN设置自动更新、自动更新快捷键)5. Java多线程通信wait()和notify()代码实例6. Django使用channels + websocket打造在线聊天室7. Java中volatile防止指令重排8. IDEA标签tabs多行显示的设置9. Django migrate报错的解决方案10. 如何禁用IntelliJ IDEA的LightEdit模式(推荐)
网公网安备