Write a calculator in JavaScript

I novice, if there is any shortage of places, hope can get guidance

Try writing a calculator with JavaScript today

First, the Calculator button is made, with the button is done, so that you can not set too many styles

<button value= "7" >7</button>

Follow the 0-9-digit buttons above, and, of course, +-*/=% these buttons.

By the way, add the following styles to each button:

<style>  . Short{height:63px;width:55px;float:left;} </style><button value= "7" class= "short" >7</button>

Add a screen to the top of the button using the text of input:

<input type= "text" id= "Pingmu" style= "HEIGHT:36PX;WIDTH:276PX;" /><br/>

And then make the layout in the following way

<-screen,

7 8 9 */

4 5 6-%

1 2 3 + =

The effect shown is as follows

Basically the style is simply done, now to solve the problem of the script

For the idea of not confusing, first to achieve the output of the button, regardless of the calculation of the problem

You can take advantage of each button's own Value property to get its values as follows:

<button value= "7" class= "short" onclick= "num (this.value)" >7</button>

Then write a num function

<script>function Num (a) {  var Pingmu=document.getelementbyid ("Pingmu")  //Get Screen object  pingmu.value=a;     Output the value of the button}</script>

Although the screen can successfully display the values of each button press, if you want to press a number greater than one, such as 64 (64), you will find

You can only press 6 and 4 respectively, but not 64, so you need to add a variable to temporarily save the displayed value, this variable is named after the Xianshi.

Each time the button is pressed, the Xianshi variable will save the pressed value, and finally the output

Of course, if you press the number and then press the operation symbol, the symbol will be saved,

So you need to determine whether the value of the button is a number or a symbol

If it is a numeric xianshi variable, save its value

If it is a symbol then only the symbol is output, and the value of the Xianshi variable is emptied

Because if you do not clear the symbol and then press the number, the number will show the previous value, for example: Press 12 + 6

When you are finished, the previous value is not emptied so it will show: 126 results

<script>var xianshi= ""; function num (a) {  var Pingmu=document.getelementbyid ("Pingmu");   if (!isnan (a)) {                  //To determine whether it is a digital     xianshi+=a;     Pingmu.value=xianshi;    }    Else{pingmu.value=a;xianshi= "";}} </script>

Then implement the calculation function

Idea: Declare a variable Jisuan to hold the value of Jisuan, and then use the Eval function to turn the string into code.

Of course the first character of Jisuan cannot be a symbol, so you need to determine whether the first button is a symbol, and the code is as follows

<script>
var jisuan= "";
var xianshi= ""; function num (a) {  if (jisuan== "" &&isnan (a)) return 0;   The first input value cannot be a symbol
  Jisuan+=a;  var Pingmu=document.getelementbyid ("Pingmu");  if (!isnan (a)) {Xianshi+=a;pingmu.value=xianshi;}  Else{pingmu.value=a;xianshi= "";}} function sum () {                        //evaluates the result functions  if (jisuan== "") Renturn0;              The first button cannot be =  var Pingmu=document.getelementbyid ("Pingmu");  Total=eval (Jisuan)  pingmu.value=total;  Jisuan= ""; xianshi= "";} </script><button value= "=" class= "sum ()" onclick= "sum ()" >=</button>

The following cache functionality is implemented

The calculation is initially completed, but the lack of some functions, such as the completion of the results of the 3+3 6, then hope to use 6 of the value of the next calculation will not be realized

Therefore, you need to add the cache function to further modify the above code

<script>var xianshi= "" var jisuan= "" Var huanchun= "";    function num (a) {  if (jisuan== "" &&huanchun== "" &&isnan (A) ") return 0   ; var Pingmu=document.getelementbyid ("Pingmu");  if (!isnan (a)) {xianshi+=a;pingmu.value=xianshi;jisuan+=a;huanchun= "";}  Else{pingmu.value=a;xianshi= ""; jisuan=jisuan+huanchun+a;huanchun= "";}} function sum () {  if (jisuan== "") Renturn0;  document.getElementById ("Pingmu");  Total=eval (Jisuan)  pingmu.value=total;  Jisuan= ""; xianshi= ""; huanchun=total;} </script>

Done

But there is no delete key, so write a delete key, this function only need to empty the value of all variables to complete the

function CCC () {  jisuan= ""; xianshi= ""; huanchun= "  "; document.getElementById ("Pingmu"). value= "";}

Html:

<button value= "C" class= "short" onclick= "CCC ()" >C</button>

Here the function name can not use clear, because it will be wrong, as to why I do not know, may violate the rights of the keyword

It feels like a little bit more binary and decimal conversions are perfect.

function ten () {  var total=0,pows=0  var Pingmu=document.getelementbyid ("Pingmu");  var Value=pingmu.value;  var arr=value.split ("");  Arr=arr.reverse ();  for (i=0;i<arr.length;i++) {  arr[i]-=0;  Pows=math.pow (2,i);  total+=arr[i]*pows;  }  Pingmu.value=total;  Jisuan= ""; xianshi= "";} function () {  var Pingmu=document.getelementbyid ("Pingmu");  var Value=pingmu.value;  value-=0;  var arr=new Array ();  for (i=0;1;i++) {  if (value==0) break;  arr[i]=value%2;  value/=2;  Value=parseint (value);  }  Arr=arr.reverse ();  Str=arr.join ("");  Pingmu.value=str;  Xianshi= ""; jisuan= "";}

<button value= "x" class= "short" onclick= "Ten ()" >ten</button><button value= "x" class= "short" onclick= " () ">two</button>

The final effect is as follows:

Blog post is not allowed to have JavaScript code so the specific effect on the law display

Writing calculators in JavaScript