本文实例为大家分享了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;
}
//验证文本框是否为空或者为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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容