Javascript implementation simple calculator _ javascript skills

A simple web page JS calculator with detailed code interpretation. Through the demo below, we can see that this is a very small js web page calculator. I think it is good to beautify the interface. After all, without any image modification, very nice, and very practical, can complete the basic mathematical calculation. For reference, compile a simple calculator case. Although the normal requirements are met, there are also some dissatisfaction. After the subsequent strength is improved, add the following questions:

1: If you want to open the page, the input box of the calculator will display a status with the default value 0, but when you add the default value 0 to the input box, the value 0 indicates the front of the input number, for example, "0123". Due to limited capabilities, this value will be supplemented after the subsequent improvement!

2: currently, only mouse control and selection buttons are available. The keyboard entry function needs to be improved.

3: The multiplication symbol was originally intended to be changed to the symbol "×", which will be improved later.

Attached image:

Html section:

  
   Calculator
  
Simple calculator @ liumobai v1.0
  
    
      
          
  
  
    
      
                          
                          
                          
                        
  
Welcome to JavaScript calculator feedback

JS section:

Script var num = 0; // define the first input data function jsq (num) {// obtain the current input document. getElementById ('screenname '). value + = document. getElementById (num ). value;} function eva () {// calculate the input result document. getElementById ("screenName "). value = eval (document. getElementById ("screenName "). value);} function clearNum () {// clear 0 document. getElementById ("screenName "). value = null; document. getElementById ("screenName "). focus ();} function tuiGe () {// return var arr = document. getElementById ("screenName"); arr. value = arr. value. substring (0, arr. value. length-1);} function onLoad () {// after loading, the cursor automatically maps to the document in the input box. getElementById ("screenName "). focus ();} script

CSS section:

/*Basic reset*/*{  margin:0;  padding:0;  box-sizing: border-box;  font: 14px Arial,sans-serif;}html{  height:100%;  background-color:lightslategrey;}#calculator{  margin: 15px auto;  width:330px;  height:400px;  border: 1px solid lightgray;  background-color:darkgrey;  padding:15px;}/*LOGO*/.LOGO{  height:20px;}.LOGO .name{  float:left;  line-height:30px;}.LOGO .verson{  float:right;  line-height:30px;}/*screen*/#shuRu{  margin-top:15px;}.screen{  margin-top:5px;  width:300px;  height:40px;  text-align: right;  padding-right:10px;  font-size:20px;}#keys{  border:1px solid lightgray;  height:223px;  margin-top:25px;  padding:8px;}#keys .last{  margin-right:0px;}.footer{  margin-top:20px;  height:20px;}.footer .link{  float:right;}#keys .buttons{  float:left;  width: 42px;  height: 36px;  text-align:center;  background-color:lightgray;  margin: 0 17px 20px 0;}

Next, I will share with you an example.

    Untitled