javascript模拟实现计算器

本文实例为大家分享了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)这个也可以,后面的话需要改为numbernum.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;}

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

您可能感兴趣的文章: