javascript模拟实现计算器

时间：2021-05-26

本文实例为大家分享了javascript模拟实现计算器的具体代码，供大家参考，具体内容如下

功能:

1、实现单击按钮录入数字
2、实现基础四则运算功能，并添加必要的异常处理。
3、实现小数点功能并添加异常处理：小数点只能出现一次
4、实现正负号功能
5、实现退位功能，已经是最后一位时，显示框显示为0
6、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="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;}//验证文本框是否为空或者为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://";}

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;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章