Knowledge point:
1. Use of mathematical operations "+ ,-, *,/"
2. input content judgment and event object Source Judgment
Effect:
Code:
Copy codeThe Code is 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 = "300" border = "0" cellspacing = "1" cellpadding = "0" id = "calculate">
<Thead>
<Tr>
<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>
<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>
// Computing object
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 ;}
}
// Computing functions
Var operateNum = function (num1, num2, op ){
If (! (Num1 & num2) return;
// Ensure that num1 and num2 are all numbers
Num1 = Number (num1 );
Num2 = Number (num2 );
// Returns num1 if the operator does not exist;
If (! Op) return num1;
// Matching Calculation Formula
If (! OperateExp [op]) return 0;
Return operateExp [op] (num1, num2 );
}
// Display panel
Var calculate_outPut = document. getElementById ("calculate_outPut ");
// Operation Panel
Var calculate_num = document. getElementById ("calculate_num ");
Var result = 0; // Calculation result
Var isReset = false; // whether to reset
Var operation; // Operator
// Set the display value
Function setScreen (num ){
Calculate_outPut.value = num;
}
// Obtain the display value
Function getScreen (){
Return calculate_outPut.value;
}
// Add a click event
Calculate_num.onclick = function (e ){
Var ev = e | window. event;
Var target = ev.tar get | ev. srcElement;
If (target. type = "button "){
Var mark = target. getAttribute ("_ type"); // obtain the custom attribute of the currently clicked button.
Var value = target. value; // obtain the current value.
Var num = getScreen (); // get the value of the current box
If (mark = 'bs ') {// return 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') {// number key
If (num = '0' | isReset) {// There are operators or the display is 0
SetScreen (value );
IsReset = false;
Return;
}
SetScreen (num. toString (). concat (value ));
}
If (mark = ".") {// decimal point
Var hasPoint = num. toString (). indexOf (".")>-1;
If (hasPoint ){
If (isReset ){
SetScreen ("0" + value );
IsReset = false;
Return;
}
Return;
}
SetScreen (num. toString (). concat (value ));
}
If (mark = "+/-") {// positive and negative signs
SetScreen (-num );
}
If (mark = "op") {// if you click an operator, 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
Result = 0;
SetScreen (result );
IsReset = false;
}
If (mark = "eval") {// calculate
If (! Operation) return;
Result = operateNum (result, num, operation );
SetScreen (result );
Operation = null;
IsReset = false;
}
}
}
</Script>
View Code
Detailed breakdown:
First:The switch statement is not used for Branch computing, and the name-value pair is used.Copy codeThe Code is as follows: // calculation object
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:Use the properties of the object event to obtain the type of the clicked object. Event bubbles are used to capture events and classify events.Copy codeThe Code is as follows: calculate_num.onclick = function (e ){
Var ev = e | window. event;
Var target = ev.tar get | ev. srcElement;
If (target. type = "button "){
Var mark = target. getAttribute ("_ type"); // obtain the custom attribute of the currently clicked button.
Var value = target. value; // obtain the current value.
Var num = getScreen (); // get the value of the current box
If (mark = 'bs ') {// return 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') {// number key
If (num = '0' | isReset) {// There are operators or the display is 0
SetScreen (value );
IsReset = false;
Return;
}
SetScreen (num. toString (). concat (value ));
}
If (mark = ".") {// decimal point
Var hasPoint = num. toString (). indexOf (".")>-1;
If (hasPoint ){
If (isReset ){
SetScreen ("0" + value );
IsReset = false;
Return;
}
Return;
}
SetScreen (num. toString (). concat (value ));
}
If (mark = "+/-") {// positive and negative signs
SetScreen (-num );
}
If (mark = "op") {// if you click an operator, 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
Result = 0;
SetScreen (result );
IsReset = false;
}
If (mark = "eval") {// calculate
If (! Operation) return;
Result = operateNum (result, num, operation );
SetScreen (result );
Operation = null;
IsReset = false;
}
}
}
Third:Global variables are used to control the local operation progress. (Status Control)Copy codeCode: var result = 0; // Calculation result
Var isReset = false; // whether to reset
Var operation; // Operator
Fourth:Separate page operations and perform decoupling.Copy codeThe Code is as follows: // set the display value
Function setScreen (num ){
Calculate_outPut.value = num;
}
// Obtain the display value
Function getScreen (){
Return calculate_outPut.value;
}
Fifth:Filter the operands to complete calculation.Copy codeThe Code is as follows: // calculate a function
Var operateNum = function (num1, num2, op ){
If (! (Num1 & num2) return;
// Ensure that num1 and num2 are all numbers
Num1 = Number (num1 );
Num2 = Number (num2 );
// Returns num1 if the operator does not exist;
If (! Op) return num1;
// Matching Calculation Formula
If (! OperateExp [op]) return 0;
Return operateExp [op] (num1, num2 );
}