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>
; <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.