The calculator features:
1. Checksum: decimal points, repeated computations, and a large number of operations that are more in line with the user experience.
2. Ability to input from keyboard.
Effect Chart:
HTML code:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
CSS code:
@CHARSET "UTF-8";
. button {width:73px;
height:50px;
margin-bottom:5px;
border:1px solid #ddd;
border-radius:1px;
Font-weight:bold;
Color: #1e395b;
Background:aqua;
font-size:20px;
border-radius:3px;
}. text {width:300px;
border:1px solid #c2c2c2;
height:50px;
border-radius:5px;
font-size:24px;
Text-align:right;
Background: #ffffff;
margin-top:10px;
margin-bottom:10px;
}. textshow{width:300px;
border:1px solid #c2c2c2;
height:40px;
border-radius:5px;
font-size:18px;
Text-align:right;
Background: #ffffff;
margin-top:10px;
margin-bottom:10px;
}. cal{margin-left:200px;
border:2px solid #99ccff;
margin:100px Auto;
position:relative;
width:330px;
height:420px;
border-radius:10px;
}. cont{margin-left:10px;
}. funcbtn{padding-left:580px;
border-radius:10px;
font-size:20px;
position:fixed; }
JS code:
/** * * */var checkequal = false;//avoid repetition calcu var opflag = false;
Check repetition add operation var uptext = document.getElementById ("Uptext");
var cal = document.getElementById ("cal"). Style;
var downtext = document.getElementById ("Downtext");
Function Show () {cal.display = ' block ';
function Hide () {Cal.display = ' none ';
function Clearalltext () {uptext.value = "";
Downtext.value = "0";
Opflag = false;
Checkequal = false;
function Oppositeop () {downtext.value =-downtext.value;
function Deleteonedigit () {downtext.value = downText.value.substring (0, downtext.value.length-1); if (Downtext.value = = "" | | (downText.value.charAt (0) = = "-" && downText.value.charAt (1) = "")
{Downtext.value = "0";
return downtext.value;
return downtext.value;
}
function Clicknum (num) {if (num = = ".")
{checkifaddpoint (num);
else {checkifaddnum (num);
} checkequal = false;
function Checkifaddpoint (num) {if (num== "." && downtext.value = = "0") | | | opflag = = TRUE) {
Downtext.value= "0.";
Opflag = false;
else if (num = = "." && downText.value.indexOf (".") >-1) {downtext.value;
else {downtext.value = num; } function Checkifaddnum (num) {if (num!=. "&& Downtext.value =" 0 "&& Downt
EXT.VALUE[1]!= "." || Opflag = = True | | Downtext.value = = "Infinity" | |
Checkequal = = true) {downtext.value = num;
Opflag = false;
else {downtext.value = num;
} function clickoperation (OP) {checkequal = false; Downtext.value = Checkdowntextvalid (Downtext.value);
Downtext.value = Checkzero (Uptext.value,downtext.value);
Switch (OP) {case "+": {Uptext.value = Appenduptextvalue (uptext.value,downtext.value, "+");
Opflag = true;
}break;
Case "-": {Uptext.value = Appenduptextvalue (Uptext.value,downtext.value, "-");
Opflag = true;
}break;
Case "X": {uptext.value = Appenduptextvalue (Uptext.value,downtext.value, "*");
Opflag = true;
}break;
Case "/": {Uptext.value = Appenduptextvalue (Uptext.value,downtext.value, "/");
Opflag = true;
}break; }} function Checkdowntextvalid (downtext) {if (Downtext.charat (downtext.length-1) = = ".")
{return downtext.substring (0,downtext.length-1);
return downtext; } function Checkzero (uptext,downtext) {if (Uptext.charat (uptext.length-1) = = "/" && Downtext = 0 ") {return"Error ";
return downtext; function Appenduptextvalue (oldvalue,newvalue,operation) {if (oldvalue = "") {return oldvalue
= Newvalue+operation;
else if (opflag!=true) {return oldvaluee = oldvalue+newvalue+operation;
} else{return oldvalue.substring (0, oldvalue.length-1) +operation; }} function Calcu () {if (!checkequal) {downtext.value = eval (uptext.value+downtext.value)
;
Uptext.value = "";
Checkequal = true;
} Window.document.onkeydown = Choosekey;
function Choosekey (evt) {if (Evt.keycode =) {alert ("=");}
else if (Evt.keycode = 8) {deleteonedigit ();}
else if (Evt.keycode = =) {Clearalltext ();}
else if (Evt.keycode = =) {Clicknum (' 0 ');}
else if (Evt.keycode = =) {clicknum (' 1 ');}
else if (Evt.keycode = =) {Clicknum (' 2 ');}
else if (Evt.keycode = =) {clicknum (' 3 ');} Else if (Evt.keycode =) {clicknum (' 4 ');}
else if (Evt.keycode = =) {Clicknum (' 5 ');}
else if (Evt.keycode = =) {clicknum (' 6 ');}
else if (Evt.keycode = n) {clicknum (' 7 ');}
else if (Evt.keycode = =) {Clicknum (' 8 ');}
else if (Evt.keycode = =) {clicknum (' 9 ');}
else if (Evt.keycode =) {Clicknum (' 0 ');}
else if (Evt.keycode = =) {clicknum (' 1 ');}
else if (Evt.keycode = =) {Clicknum (' 2 ');}
else if (Evt.keycode = =) {clicknum (' 3 ');}
else if (Evt.keycode = =) {clicknum (' 4 ');}
else if (Evt.keycode = =) {Clicknum (' 5 ');}
else if (Evt.keycode = = 102) {clicknum (' 6 ');}
else if (Evt.keycode = =) {clicknum (' 7 ');}
else if (Evt.keycode = =) {Clicknum (' 8 ');}
else if (Evt.keycode = =) {clicknum (' 9 ');}
else if (Evt.keycode = =) {clicknum ('. ');}
else if (Evt.keycode = =) {clickoperation (' x ');}
else if (Evt.keycode = =) {clickoperation (' + ');} else if (Evt.keycode = =) {ClickOperation (' a ');}
else if (Evt.keycode = = 109) {clickoperation ('-');}
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.