JavaScript white simple Calculator _javascript tips

The calculator code in this article is very simple and you can easily apply the Web effects to your project.

Html

First we put an input box and multiple calculator buttons on the Web page.

<div id= "Calcuator" > <input type= "text" id= "Input-box" value= "0" size= "" maxlength= "" readonly= "ReadOnly" /> <div id= "btn-list" > <div onclick= "operator (' Clear ')" class= "btn-30 Btn-radius color-red Clear-mar 
      Ginleft "> c</div> <div onclick=" operator (' opposite ') "class=" btn-30 Btn-radius color-blue "> +/-</div> <div onclick= "operator (' percent ')" class= "btn-30 btn-radius color-blue" >%</div 
    > <div onclick= "operator (' backspace ')" class= "btn-70 btn-radius color-red font-14" >←</div> <div onclick= "Typetoinput (' 7 ')" class= "btn-30 btn-radius clear-marginleft" > 7</div> <div on click= "Typetoinput (' 8 ')" class= "btn-30 Btn-radius" > 8</div> <div onclick= "Typetoinput (' 9 ')" Class = "Btn-30 Btn-radius" > 9</div> <div onclick= "operator (' Plus ')" class= "btn-30 Btn-radius Color-blu E font-14 "> +</div> <div onclick= "operator (' minus ')" class= "btn-30 btn-radius color-blue font-14" >-</div&gt 
    ; <div onclick= "Typetoinput (' 4 ')" class= "btn-30 btn-radius clear-marginleft" > 4</div> <div ck= "Typetoinput (' 5") "class=" btn-30 Btn-radius "> 5</div> <div onclick=" Typetoinput (' 6 ') "class=" Btn-30 Btn-radius "> 6</div> <div onclick=" operator (' multiply ') "class=" btn-30 Btn-radius COLOR-BL UE font-14 ">x</div> <div onclick=" operator (' divide ') "class=" btn-30 Btn-radius color-blue font-1 
      2 ">÷</div> <div onclick=" Typetoinput (' 1 ') "class=" btn-30 "Btn-radius clear-marginleft" > 1</div> <div onclick= "Typetoinput (' 2 ')" class= "btn-30 Btn-radius" > 2</div> <div on click= "Typetoinput (' 3 ')" class= "btn-30 Btn-radius" > 3</div> <div onclick= "operator (' POW ')" class= "Btn-30 Btn-radiUS color-blue font-14 ">x²</div> <div onclick=" operator (' sqrt ') "class=" btn-30 Btn-radius color-b Lue font-12 ">√</div> <div onclick=" Typetoinput (' 0 ') "class=, btn-70 Btn-radius clear-marginleft" & 
      Gt 0</div> <div onclick= "typetoinput ('. ')" class= "btn-30 Btn-radius" > .</div> <div onc lick= "operator (' result ')" class= "btn-70 btn-radius color-red font-14" > =</div> </div> </div&
 Gt

Js

Follow the action type:

function operator (type) {switch (type) {case "clear": Input.value = "0"; 
    _string.length = 0; 
        /*document.getelementbyid ("CCC"). innerhtml= "";     
        for (i=0;i<_string.length;i++) {document.getElementById ("CCC"). innerhtml+=_string[i]+ "" 
  }*/break; 
      Case "BACKSPACE": if (Checknum (Input.value)!= 0) {input.value = Input.value.replace (/.$/, ""); 
      if (Input.value = = "") {Input.value = "0"; 
  }} break; 
    Case "opposite": if (Checknum (Input.value)!= 0) {input.value =-input.value; 
  } break; 
    Case "percent": if (Checknum (Input.value)!= 0) {input.value = input.value/100; 
  } break; 
    Case "POW": if (Checknum (Input.value)!= 0) {input.value = Math.pow (Input.value, 2); 
  } break; 
    Case "sqrt": if (Checknum (Input.value)!= 0) {input.value = Math.sqrt (Input.value); 
  } break; 
Case "plus":    if (Checknum (Input.value)!= 0) {_string.push (input.value); 
      _type = "plus" Input.value = "+"; 
    Input.name = "type"; 
  } break; 
      Case "Minus": if (Checknum (Input.value)!= 0) {_string.push (input.value); 
      _type = "minus" Input.value = "-"; 
    Input.name = "type"; 
  } break; 
      Case "Multiply": if (Checknum (Input.value)!= 0) {_string.push (input.value); 
      _type = "multiply" Input.value = "x"; 
    Input.name = "type"; 
  } break; 
      Case "divide": if (Checknum (Input.value)!= 0) {_string.push (input.value); 
      _type = "divide" Input.value = "the"; 
    Input.name = "type"; 
  } break; 
      Case ' result ': if (Checknum (Input.value)!= 0) {_string.push (input.value); if (parseint (_string.length)% 2!= 0) {_string.push (_string[_string.length-2])} if (_type = " Plus ") {Input.value = parsefloat (Result (_string) [0]) + parsefloat (resUlt (_string) [1]); Input.name = "type"} else if (_type = = "Minus") {Input.value = parsefloat (Result (_string) [0])-Parseflo 
        At (Result (_string) [1]); Input.name = "type"} else if (_type = = "Multiply") {Input.value = parsefloat (Result (_string) [0]) * Parse 
        Float (Result (_string) [1]); Input.name = "type"} else if (_type = = "divide") {Input.value = parsefloat (Result (_string) [0])/PARSEFL 
        Oat (Result (_string) [1]); 
    Input.name = "type"} break; } 
 
  } 
}

The above is the entire contents of this article, I hope you can enjoy.