Of Stack

javascript simulation calculator

  • 2021-11-01 23:29:32
  • OfStack

In this paper, we share the specific code of javascript simulation calculator for your reference, the specific contents are as follows

Functions:

1. Click the button to enter numbers
2. Implement the basic 4 operation functions and add necessary exception handling.
3. Realize the decimal point function and add exception handling: the decimal point can only appear once
4. Realize the sign function
5. Realize the abdication function. When it is the last 1 bit, the display box is displayed as 0
6. AC screen clearing function

Knowledge points used:

1. Using a large number of custom functions to realize business logic
2. Flexible use of events and event handling
3. Cultivate the programming method of exception handling
4. Cultivate and practice programming with different ideas

Purpose of comprehensive exercise:

1. Combine css, html and js effectively to realize service function
2. Exercise and cultivate programming ideas and problem-solving abilities and methods
3. Exercise and cultivate the use of a variety of programming ideas to achieve preset goals

Moreover, I just got started with js recently, and I feel very interesting. I didn't have so much interest in learning the basics of java. I feel that I just got started with js. I feel particularly fun and interesting. Here, I show 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 boxes 10 Number ....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. O 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;// Put the default 0 Eliminate 
 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 will do, too , 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(" Divisor cannot be 0");
 }else{
 num.value=btn_num1/num.value*1;
 }
 break;
 }
 break;
 }
 }
 }
 }
}
// Function of decimal point 
function dec_number(n){
 if(n.indexOf(".")==-1){
 n=n+".";
 }
 return n;
}
// Verify that the text box is empty or is 0
function isNull(n){
 if(n*1==0||n.length==0){
 return true;
 }else{
 return false;
 }
}
// Abdication key 
function back(n){
 n=n.substr(0,n.length-1);
 if(isNull(n)){
 n="0";
 }
 return n;
}
// Sign +/-
function sign(n){
 if(n.indexOf("-")==-1){
 n="-"+n;
 }else{
 n=n.substr(1,n.length);
 }
 return n;
}
//isNaN: Cannot convert to number: true, Can be converted into a number is false
function isnumber(n){
 return !isNaN(n);
 }
 //C Button usage 1 Hyperlink, link to Baidu, this can be played casually 
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 classes and buttons */
 background-color:white;
 border:1px solid;
}
Related articles: