Simple calculator function realized by JavaScript

Time:2021-4-16

This example for you to share a simple calculator JavaScript specific code, for your reference, the specific content is as follows

1. Realize the basic calculator function, as shown in the figure

2. Logic code

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 < title > calculator
 <! -- style -- >
 <style>
 .showdiv{
 text-align: center;
 margin:auto;/ *Set center*/
 border: solid 1px;
 width: 400px;
 height: 500px;
 Set border; / - 10radius*/
 }
 input[type="text"]{
 margin-top: 10px;
 width: 380px;
 height: 40px;
 font-size: 40px;
 }
 input[type="button"]{
 margin: 10px;
 margin-top: 20px;
 width: 60px;
 height: 80px;
 font-size: 40px;
 font-weight: bold;
 }
 </style>
 <! -- set JS code -- >
 <script type="text/javascript">
 /*Assign the value of the button to the input box*/
 function num(btn){
 //Remove the non-zero
 if( document.getElementById ("inp"). value.match (divisor){
  document.getElementById("inp").value = "";
 }
 //Gets the value of the button
 var num = btn.value;
 console.log(num +" " +typeof(num))
 //Assign a value to the text text box
 switch(num){
  case "c":
  document.getElementById("inp").value = "";
  break;
  case "=":
  if(document.getElementById("inp").value.match("/")){
  if(document.getElementById("inp").value.split("/")[1] == "0"){
  document.getElementById ("InP"). Value = divisor cannot be zero;
  }else{
  document.getElementById("inp").value = eval(document.getElementById("inp").value);
  }
  break;
  }else{
  document.getElementById("inp").value = eval(document.getElementById("inp").value);
  break;
  }
  default: 
  document.getElementById("inp").value = document.getElementById("inp").value+num;
  break;
 }
 }
 </script>
 </head>
 <body>
 <div class = "showdiv">
 <input type="text" name="" value="" readonly="readonly"/><br />
 <input type="button" name="" value="0" onclick="num(this)"/>
 <input type="button" name="" value="1" onclick="num(this)"/>
 <input type="button" name="" value="2" onclick="num(this)"/>
 <input type="button" name="" value="3" onclick="num(this)"/><br />
 <input type="button" name="" value="4" onclick="num(this)"/>
 <input type="button" name="" value="5" onclick="num(this)"/>
 <input type="button" name="" value="6" onclick="num(this)"/>
 <input type="button" name="" value="7" onclick="num(this)"/><br />
 <input type="button" name="" value="8" onclick="num(this)"/>
 <input type="button" name="" value="9" onclick="num(this)"/>
 <input type="button" name="" value="+" onclick="num(this)"/>
 <input type="button" name="" value="-" onclick="num(this)"/><br />
 <input type="button" name="" value="*" onclick="num(this)"/>
 <input type="button" name="" value="/" onclick="num(this)"/>
 <input type="button" name="" value="=" onclick="num(this)"/>
 <input type="button" name="" value="c" onclick="num(this)"/>
 </div>
 </body>
</html>

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.