JavaScript simulation calculator

This article shares the specific code of JavaScript simulation calculator for your reference. The specific content is as follows

Function:

1. Click the button to enter the number
2. Implement basic arithmetic operations and add necessary exception handling.
3. Implement the decimal point function and add exception handling: the decimal point can only appear once
4. Implement the positive and negative sign function
5. Implement the abdication function. When it is the last digit, the display box will show 0
6. AC screen clearing function

Knowledge points used:

1. Use a large number of custom functions to implement business logic
2. Flexible use of events and event processing
3. Cultivate programming methods for exception handling
4. Cultivate and practice using different ideas to implement programming

Purpose of comprehensive exercises:

1. Effectively combine CSS, HTML and JS to realize business functions
2. Exercise and cultivate programming ideas, problem-solving abilities and methods
3. Exercise and cultivate the use of various programming ideas to complete pre-set goals

And I just started to learn js recently, and I find it very interesting. I was not that interested when I was learning the basics of java. I feel that js is very interesting when I first start using it. Here is a simple calculator source code:

html page:

<!DOCTYPE html>
<html>
<head>
 <title>js calculator</title>
<link rel="stylesheet" type="text/css" href="index.css" >
<script type="text/javascript" src="index.js">
</script>
</head>
<body onload="init()">
 <!-- 1 text box 10 numbers .... 20 buttons -->
<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 page:

function init(){
 var num = document.getElementById("num");
 num.value=0;
 var btn_num1;
 var fh;
 num.disabled="disabled";
 // var n1=document.getElementById("n1");
 //n1.onclick=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; //Eliminate the default 0 if(isNull(num.value)){
 num.value=this.value;
 }else{
 num.value=num.value+this.value;
 }
 }else{
 //Test whether the function is correct// alert("bushishuzi")
 var btn_num=this.value;
 //Test whether the function is correct (pop-up window)
 // alert(btn_num);
 switch(btn_num){
 case "+":
 // alert(11);
 btn_num1=num.value*1; //=parseInt(num.value) This is also OK, the following words need to be changed to 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("The divisor cannot be 0");
 }else{
 num.value=btn_num1/num.value*1;
 }
 break;
 }
 break;
 }
 }
 }
 }
}
//Decimal point function function dec_number(n){
 if(n.indexOf(".")==-1){
 n=n+".";
 }
 return n;
}
//Verify that the text box is empty or 0
function isNull(n){
 if(n*1==0||n.length==0){
 return true;
 }else{
 return false;
 }
}
//Back key function back(n){
 n=n.substr(0,n.length-1);
 if (isNull(n)) {
 n="0";
 }
 return n;
}
//Positive and negative signs +/-
function sign(n){
 if(n.indexOf("-")==-1){
 n="-"+n;
 }else{
 n=n.substr(1,n.length);
 }
 return n;
}
//isNaN: cannot be converted into a number: true, can be converted into a number: false
function isnumber(n){
 return !isNaN(n);
 }
 //Button C uses a hyperlink to Baidu, which can be used at will. function init_baidu(){
 window.location.href="http://www.baidu.com";
}

CSS page:

*{
 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{/*//Use of pseudo-class and button*/
 background-color:white;
 border:1px solid;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: