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

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

• js精准的倒计时函数分享
• 超精准的javascript验证身份证号的方法
• js拖拉表格实现内容计算
• js实现一个简易的计算器
• JS实现苹果计算器
• javascript实现简易计算器功能
• JavaScript 如何计算文本的行数的实现
• JavaScript经典案例之简易计算器
• js精准计算

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！