Recently used JavaScript to write a simple calculator, their own testing feel good, first of all to watch the next interface:
This is the interface, but what about the function?
Now it's just a simple standard calculator that can perform subtraction continuous operations and residual operations. If there is an error with a divisor of zero, the following is a hint, like this:
I do not know how to write, but for beginners, this must be a feast, which can be touched by a lot of things, you can take to learn. If there is a master to see the omissions, errors and so on, give guidance.
The following code, I hope that there are enough comments.
JS section:
Copy Code code as follows:
var num=0,result=0,numshow= "0";
var operate=0; Flags that determine the status of the input
var calcul=0; A flag that determines the state of a calculation
var quit=0; Flag to prevent duplicate keys
function command (num) {
var str=string (Document.calculator.numScreen.value); Get current display data
str= (str!= "0")? ((operate==0)? Str: ""): ""; If the current value is not "0" and the state is 0, the current value is returned, otherwise a null value is returned;
STR=STR + String (num); Append characters to current value
DOCUMENT.CALCULATOR.NUMSCREEN.VALUE=STR; Refresh Display
operate=0; Reset Input Status
quit=0; Reset flag to prevent duplicate keys
}
function DZero () {
var str=string (Document.calculator.numScreen.value);
str= (str!= "0")? ((operate==0)? str + "00": "0"): "0"; If the current value is not "0" and the state is 0, returns "0" when str+ "00";
DOCUMENT.CALCULATOR.NUMSCREEN.VALUE=STR;
operate=0;
}
function dot () {
var str=string (Document.calculator.numScreen.value);
str= (str!= "0")? ((operate==0)? Str: "0"): "0"; If the current value is not "0" and the state is 0, the current value is returned, otherwise "0" is returned;
for (i=0 i<=str.length;i++) {//To determine if there is already a point number
if (str.substr (i,1) = = ".") return false; If there is no longer inserted
}
Str=str + ".";
DOCUMENT.CALCULATOR.NUMSCREEN.VALUE=STR;
operate=0;
}
Function del () {//BACKSPACE
var str=string (Document.calculator.numScreen.value);
str= (str!= "0")? STR: "";
Str=str.substr (0,str.length-1);
Str= (str!= "")? STR: "0";
DOCUMENT.CALCULATOR.NUMSCREEN.VALUE=STR;
}
function Clearscreen () {//Erase data
num=0;
result=0;
numshow= "0";
document.calculator.numscreen.value= "0";
}
Function Plus () {//addition
Calculate (); Calling a calculated function
operate=1; Change input status
calcul=1; Change calculation status to Plus
}
function minus () {//subtraction
Calculate ();
operate=1;
calcul=2;
}
Function times () {//multiplication
Calculate ();
operate=1;
calcul=3;
}
function divide () {//Division
Calculate ();
operate=1;
calcul=4;
}
function Persent () {//remainder
Calculate ();
operate=1;
calcul=5;
}
function equal () {
Calculate (); Equals
operate=1;
num=0;
result=0;
numshow= "0";
}
//
function Calculate () {
Numshow=number (Document.calculator.numScreen.value);
if (num!=0 && quit!=1) {//Determine whether the previous OP count is zero and the status of the anti-repeat key
Switch (calcul) {//Determine the status to be entered
Case 1:result=num+numshow;break; Calculate "+"
Case 2:result=num-numshow;break; Calculate "-"
Case 3:result=num*numshow;break;
Case 4:if (numshow!=0) {result=num/numshow;} Else{document.getelementbyid ("note"). Innerhtml= "Dividend cannot be zero!" "; SetTimeout (clearnote,4000)} break;
Case 5:result=num%numshow;break;
}
Quit=1; Avoid repeating keystrokes
}
else{
Result=numshow;
}
Numshow=string (result);
Document.calculator.numscreen.value=numshow;
Num=result; Store Current Value
}
function Clearnote () {//Empty prompt
document.getElementById ("note"). innerhtml= "";
}
HTML section:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> to Novice: JS form operation (d) simple calculator (ii) </title>
<style type= "Text/css" >
Body {
font-size:12px;
Font-family:arial, Georgia, "Times of New Roman", Times, serif;
Color: #555;
Text-align:center;
Background-color: #e2e2e2;
}
h6{
margin:0;
font-size:12px;
}
#calculator {
width:240px;
Height:auto;
Overflow:hidden;
margin:10px Auto;
border: #fff 1px solid;
padding-bottom:10px;
Background-color: #f2f2f2;
}
#calculator Div {
Clear:both;
}
#calculator ul{
padding:0;
margin:5px 14px;
border: #fff 1px solid;
Height:auto;
Overflow:hidden
}
#calculator li{
List-style:none;
Float:left;
width:32px;
height:32px;
margin:5px;
Display:inline;
line-height:32px;
font-size:14px;
Background-color: #eaeaea;
}
#calculator li.tool{
Background-color: #e2e2e2;
}
#calculator li:hover{
Background-color: #f9f9f9;
Cursor:pointer;
}
#calculator li:active{
Background-color: #fc0;
Cursor:pointer;
}
#calculator li.tool:active{
Background-color: #d8e8ff;
Cursor:pointer;
}
#calcu-head {
Text-align:left;
padding:10px 15px 5px;
}
Span.imyeah {
Float:right;
Color: #ccc;
}
Span.imyeah a{
Color: #ccc;
}
. screen{
width:200px;
height:24px;
line-height:24px;
padding:4px;
border: #e6e6e6 1px solid;
Border-bottom: #f2f2f2 1px solid;
Border-right: #f2f2f2 1px solid;
margin:10px Auto;
direction:ltr;
Text-align:right;
font-size:16px;
Color: #999;
}
#calcu-foot{
Text-align:left;
padding:10px 15px 5px;
Height:auto;
Overflow:hidden;
}
span#note{
Float:left;
width:210px;
Height:auto;
Overflow:hidden;
color:red;
}
span.welcome{
Clear:both;
Color: #999;
}
Span.welcome a{
Float:right;
Color: #999;
}
</style>
<script language= "JavaScript" >
Insert the above JS code here
</script>
<body>
<div id= "Calculator" >
<div id= "Calcu-head" ><span class= "Imyeah" >©<a href= "http://www.cnblogs.com/imyeah/" target= "_blank" >i ' m yeah!</a></span><form name= "Calculator" action= "method=" Get ">
<div id= "Calcu-screen" >
<!--configuration display window, using onfocus= "This.blur ();" Avoid keyboard input-->
<input type= "text" name= "Numscreen" class= "screen" value= "0" onfocus= "This.blur ();"/>
</div>
<div id= "CALCU-BTN" >
<ul> <!--configuration button-->
<li onclick= "command (7)" >7</li>
<li onclick= "command (8)" >8</li>
<li onclick= "command (9)" >9</li>
<li class= "tool" onclick= "Del ()" >←</li>
<li class= "tool" onclick= "Clearscreen ()" >C</li>
<li onclick= "command (4)" >4</li>
<li onclick= "command (5)" >5</li>
<li onclick= "command (6)" >6</li>
<li class= "tool" onclick= "Times ()" >x</li>
<li class= "tool" onclick= "divide ()" >÷</li>
<li onclick= "command (1)" >1</li>
<li onclick= "command (2)" >2</li>
<li onclick= "command (3)" >3</li>
<li class= "tool" onclick= "plus ()" >+</li>
<li class= "tool" onclick= "Minus ()" >-</li>
<li onclick= "command (0)" >0</li>
<li onclick= "DZero ()" >00</li>
<li onclick= "dot ()" >.</li>
<li class= "tool" onclick= "persent ()" >%</li>
<li class= "tool" onclick= "equal ()" >=</li>
</ul>
</div>
<div id= "Calcu-foot" >
<span id= "Note" ></span>
<span class= "Welcome" > Welcome to use javascript calculator! <a href= "Http://www.cnblogs.com/imyeah" target= "_blank" > Feedback </a></span>
</div>
</form>
</div>
</body>
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
