JavaScript simulation calculator

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:
  • js accurate countdown function sharing
  • Super accurate javascript method to verify ID number
  • js drag and drop table to realize content calculation
  • js implements a simple calculator
  • JS implementation of Apple calculator
  • JavaScript to achieve simple calculator function
  • How to calculate the number of lines of text in JavaScript
  • JavaScript classic case simple calculator
  • js precise calculation

<<:  Ubuntu basic settings: installation and use of openssh-server

>>:  MySQL 5.7.18 version free installation configuration tutorial

Recommend

A brief discussion on the differences and summary of the three floating point types of float, double and decimal in MySQL

The storage size and range of each floating point...

40 fonts recommended for famous website logos

Do you know what fonts are used in the logo desig...

Let's talk about the LIMIT statement in MySQL in detail

Table of contents question Server layer and stora...

Specific use of routing guards in Vue

Table of contents 1. Global Guard 1.1 Global fron...

A brief discussion of several browser compatibility issues encountered

background Solving browser compatibility issues i...

Vue realizes the progress bar change effect

This article uses Vue to simply implement the cha...

More than 100 lines of code to implement react drag hooks

Preface The source code is only more than 100 lin...

jQuery canvas draws picture verification code example

This article example shares the specific code of ...

After submitting the html drop-down menu, the selected value is retained instead of returning to the default value

Copy code The code is as follows: <html> &l...

Detailed explanation of Linux one-line command to process batch files

Preface The best method may not be the one you ca...

MySQL 5.7.17 installation and configuration tutorial under CentOS6.9

CentOS6.9 installs Mysql5.7 for your reference, t...

What is a MySQL index? Ask if you don't understand

Table of contents Overview From Binary Tree to B+...

MySQL slow query pitfalls

Table of contents 1. Slow query configuration 1-1...

Detailed explanation of how to implement secondary cache with MySQL and Redis

Redis Introduction Redis is completely open sourc...

Detailed explanation of Angular routing sub-routes

Table of contents 1. Sub-route syntax 2. Examples...