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

Set an icon for the website to be displayed on the far left of the browser tab

What is the purpose of this sentence? Copy code Th...

Solve the scroll-view line break problem of WeChat applet

Today, when I was writing a small program, I used...

JavaScript flow control (loop)

Table of contents 1. for loop 2. Double for loop ...

Tutorial on installing Seurat2 and Seurat3 simultaneously using the same version of R in Linux

Seurat is a heavyweight R package for single-cell...

MySQL Community Server 8.0.11 installation and configuration method graphic tutorial

I recently started learning about database knowle...

Web front-end performance optimization

Web front-end optimization best practices: conten...

Understanding the Lazy Loading Attribute Pattern in JavaScript

Traditionally, developers create properties in Ja...

Flex layout realizes the layout mode of upper and lower fixed and middle sliding

This article mainly introduces the layout method ...

Analysis of Linux kernel scheduler source code initialization

Table of contents 1. Introduction 2. Basic Concep...

Installation method of MySQL 5.7.18 decompressed version under Win7x64

Related reading: Solve the problem that the servi...

How to install and persist the postgresql database in docker

Skip the Docker installation steps 1. Pull the po...

How to display TIF format images in browser

The browser displays TIF format images Copy code T...

Vue complete code to implement single sign-on control

Here is a Vue single sign-on demo for your refere...

Solutions for high traffic websites

First: First, confirm whether the server hardware ...

How to block and prohibit web crawlers in Nginx server

Every website usually encounters many non-search ...