javascript-Simple calculator to achieve step decomposition (photo) _javascript Tips

Knowledge Points:
1, the use of mathematical operation "+,-,*,/"
2, the input content judgment, to the source judgment of the event object
Effect:

Code:

Copy Code code as follows:

<style>
#calculate {
line-height:60px;
Text-align:center;
Background: #ccc;
font-size:16px;
Font-weight:bold;
}
#calculate tbody input{
width:100%;
height:60px;
Background: #033;
Color: #fff;
Font:bold 16px/1em ' Microsoft Yahei ';
}
#calculate tbody td{
width:25%;
Background: #fff;
}
#calculate_outPut {
font-size:20px;
letter-spacing:2px;
Background: #fff;
height:40px;
Border:none;
Text-align:right;
width:100%;
}
</style>
<table width= "border=" 0 "cellspacing=" 1 "cellpadding=" 0 "id=" calculate ">
<thead >
<tr>
&LT;TD colspan= "4" align= "right" ><input id= "calculate_output" value= "0" disabled= "disabled" ></td>
</tr>
</thead>
<tbody id= "Calculate_num" >
<tr>
<td><label>
<input type= "button" name= "button" id= "button" value= "7" _type= ' num '/>
</label></td>
<td><input type= "button" value= "8" _type= ' num '/></td>
<td><input type= "button" value= "9" _type= ' num '/></td>
<td><input type= "button" value= "/" _type= ' op '/></td>
</tr>
<tr>
<td><input type= "button" value= "4" _type= ' num '/></td>
<td><input type= "button" value= "5" _type= ' num '/></td>
<td><input type= "button" value= "6" _type= ' num '/></td>
<td><input type= "button" value= "*" _type= ' op '/></td>
</tr>
<tr>
<td><input type= "button" value= "1" _type= ' num '/></td>
<td><input type= "button" value= "2" _type= ' num '/></td>
<td><input type= "button" value= "3" _type= ' num '/></td>
<td><input type= "button" value= "-" _type= ' op '/></td>
</tr>
<tr>
<td><input type= "button" value= "0" _type= ' num '/></td>
<td><input type= "button" value= "+ + + +" _type= ' + + '/></td>
<td><input type= "button" value= "." _type= '. '/></td>
<td><input type= "button" value= "+" _type= ' op '/></td>
</tr>
<tr>
&LT;TD colspan= "2" id= "Debug" ><input type= "button" value= "backspace" _type= ' BS '/></td>
<td><input type= "button" value= "C" _type= ' CLS '/></td>
<td><input type= "button" value= "=" _type= ' eval '/></td>
</tr>
</tbody>
</table>
<script>
Calculated objects
var operateexp={
' + ': function (num1,num2) {return num1+num2;},
'-': function (num1,num2) {return num1-num2;},
' * ': function (num1,num2) {return num1*num2;},
'/': function (num1,num2) {return num2===0?0:num1/num2;}
}
Calculation function
var operatenum=function (Num1,num2,op) {
if (!) ( NUM1&AMP;&AMP;NUM2)) return;
Make sure the num1,num2 are all numbers.
Num1=number (NUM1);
Num2=number (NUM2);
No operator exists, return NUM1;
if (!OP) return NUM1;
Matching Operation formula
if (!operateexp[op]) return 0;
return Operateexp[op] (num1,num2);
}
Display panel
var Calculate_output=document.getelementbyid ("Calculate_output");
Operator panel
var Calculate_num=document.getelementbyid ("Calculate_num");
var result=0;//calculation results
Whether the Var isreset=false;//is reset
var operation;//operator
Set the value of the display
function Setscreen (num) {
Calculate_output.value=num;
}
Get the value of the display screen
function Getscreen () {
return calculate_output.value;
}
Add Click event
Calculate_num.onclick=function (e) {
var ev = e | | window.event;
var target = Ev.target | | Ev.srcelement;
if (target.type== "button") {
var mark=target.getattribute ("_type");//Get the custom properties of the button currently clicked.
var value=target.value;//gets the current value
var num=getscreen ();//Get the value of the current box
if (mark=== ' BS ') {//Backspace key
if (num==0) return;
var snum=math.abs (num). toString ();
if (snum.length<2)
Setscreen (0);
Else
Setscreen (Num.tostring (). Slice (0,-1));
}
if (mark=== ' num ') {//numeric key
if (num=== ' 0 ' | | Isreset) {//operator or display 0
Setscreen (value);
Isreset=false;
Return
}
Setscreen (Num.tostring (). Concat (value));
}
if (mark=== ".") {//Decimal
var haspoint=num.tostring (). IndexOf (".") >-1;
if (haspoint) {
if (Isreset) {
Setscreen ("0" +value);
Isreset=false;
Return
}
Return
}
Setscreen (Num.tostring (). Concat (value));
}
if (mark=== "+ +") {//plus sign
Setscreen (-num);
}
if (mark=== "Op") {//If the operator is clicked, design the first operand
if (Isreset) return;
Isreset=true;
if (!operation) {
Result=+num;
Operation=value;
Return
}
Result=operatenum (result,num,operation);
Setscreen (result);
Operation=value;
}
if (mark=== "CLS") {//Clear zero
result=0;
Setscreen (result);
Isreset=false;
}
if (mark=== "eval") {//Calculation
if (!operation) return;
Result=operatenum (result,num,operation);
Setscreen (result);
Operation=null;
Isreset=false;
}
}
}
</script>
View Code

Detailed decomposition:
First:The branch calculation section does not use a switch statement and uses the form of a name-value pair.

Copy Code code as follows:

Calculated objects
var operateexp={
' + ': function (num1,num2) {return num1+num2;},
'-': function (num1,num2) {return num1-num2;},
' * ': function (num1,num2) {return num1*num2;},
'/': function (num1,num2) {return num2===0?0:num1/num2;}
}

Second:object to get the type of object that is clicked. Use event bubbling to capture events and classify events.

Copy Code code as follows:

Calculate_num.onclick=function (e) {
var ev = e | | window.event;
var target = Ev.target | | Ev.srcelement;
if (target.type== "button") {
var mark=target.getattribute ("_type");//Get the custom properties of the button currently clicked.
var value=target.value;//gets the current value
var num=getscreen ();//Get the value of the current box
if (mark=== ' BS ') {//Backspace key
if (num==0) return;
var snum=math.abs (num). toString ();
if (snum.length<2)
Setscreen (0);
Else
Setscreen (Num.tostring (). Slice (0,-1));
}
if (mark=== ' num ') {//numeric key
if (num=== ' 0 ' | | Isreset) {//operator or display 0
Setscreen (value);
Isreset=false;
Return
}
Setscreen (Num.tostring (). Concat (value));
}
if (mark=== ".") {//Decimal
var haspoint=num.tostring (). IndexOf (".") >-1;
if (haspoint) {
if (Isreset) {
Setscreen ("0" +value);
Isreset=false;
Return
}
Return
}
Setscreen (Num.tostring (). Concat (value));
}
if (mark=== "+ +") {//plus sign
Setscreen (-num);
}
if (mark=== "Op") {//If the operator is clicked, design the first operand
if (Isreset) return;
Isreset=true;
if (!operation) {
Result=+num;
Operation=value;
Return
}
Result=operatenum (result,num,operation);
Setscreen (result);
Operation=value;
}
if (mark=== "CLS") {//Clear zero
result=0;
Setscreen (result);
Isreset=false;
}
if (mark=== "eval") {//Calculation
if (!operation) return;
Result=operatenum (result,num,operation);
Setscreen (result);
Operation=null;
Isreset=false;
}
}
}

Third:The use of global variables, the use of global variables to control the progress of local operations. (State control)

Copy Code code as follows:

var result=0;//calculation results
Whether the Var isreset=false;//is reset
var operation;//operator

Fourth:Detach and decouple the page operation.

Copy Code code as follows:

Set the value of the display
function Setscreen (num) {
Calculate_output.value=num;
}
Get the value of the display screen
function Getscreen () {
return calculate_output.value;
}

Fifth:Filter the operands to complete the calculation.

Copy Code code as follows:

Calculation function
var operatenum=function (Num1,num2,op) {
if (!) ( NUM1&&NUM2)) return;
Make sure the num1,num2 are all numbers.
Num1=number (NUM1);
Num2=number (NUM2);
No operator exists, return NUM1;
if (!OP) return NUM1;
Matching Operation formula
if (!operateexp[op]) return 0;
return Operateexp[op] (num1,num2);
}

PS: Here again for you to recommend two online calculator this site, are implemented with JS, and powerful, I believe that in-depth understanding of JavaScript math and web design will help:

Online Standard calculator:http://tools.jb51.net/jisuanqi/jsq

Online Science calculator:Http://tools.jb51.net/jisuanqi/jsqkexue