本文实例为大家分享了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://HdhCmsTestbaidu测试数据" ;
}
css页面：
*{
margin : 0px ;
padding : 0px ;
}
div{
width : 170px ;
}
#div 1 {
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 ;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_37215985/article/details/115425902
查看更多关于javascript模拟实现计算器的详细内容...