Code:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> for beginners: simple js calculator </title>
<Style type = "text/css">
Body {
Font-size: 12px;
Color: #333;
}
# Jsq input {/* input box style */
Border: # ccc 1px solid;
Border-right: # e2e2e2 1px solid;
Border-bottom: # e2e2e2 1px solid;
Height: 18px;
Line-height: 18px;
Padding: 3px;
}
# Jsq span {
Color: #999.
}
# Jsq input. btn {/* button style */
Border: # e6e6e6 1px solid;
Background-color: # e2e2e2;
Width: 30px;
Height: 24px;
Text-align: center;
Line-height: 16px;
Cursor: pointer;
Margin: 0 3px;
Color: #999;
}
# Jsq input. btn: hover {/* button floating style */
Border: # e2e2e2 1px solid;
Background-color: # f2f2f2;
Color: #333;
}
</Style>
<Script type = "text/javascript">
Function imyeah (type) {// calculate the function
Var result = 0;
Num1 = Number (document. jisuanqi. num1.value); // Number () can be forcibly converted to a Number. For example, "123abc" is converted to "123"
Num2 = Number (document. jisuanqi. num2.value );
If (num1 = "" | num2 = "") {return false;} // if no number of computations is input, no execution is performed.
Switch (type) {// determine the computing symbol to be executed
Case 0: result = num1 + num2; break; // calculate "+"
Case 1: result = num1-num2; break; // calculate "-"
Case 2: result = num1 * num2; break;
Case 3: result = num1/num2; break;
Case 4: result = num1 % num2; break;
}
Document. jisuanqi. jieguo. value = result; // The calculation result is displayed.
}
</Script>
</Head>
<Body>
<Form name = "jisuanqi" id = "jsq" action = "" method = "get"/>
<P> Number 1:
<Input type = "text" size = "10" name = "num1" value = ""/>
</P>
<P> second number:
<Input type = "text" size = "10" name = "num2" value = ""/>
</P>
<P> calculation result:
<Input type = "text" size = "10" name = "jieguo" onClick = "imyeah (0)" value = "+" onfocus = "this. select () "/> <span> left click" + ", right click" select copy "</span>
</P>
<P>
<Input type = "button" class = "btn" value = "-" onClick = "imyeah (1)"/> <! -- Define button -->
<Input type = "button" class = "btn" value = "×" onClick = "imyeah (2)"/>
<Input type = "button" class = "btn" value = "inline" onClick = "imyeah (3)"/>
<Input type = "button" class = "btn" value = "%" onClick = "imyeah (4)"/>
</P>
</Body>
</Html>
Running effect:
