The final effect of the following figure-2, there is a bug: Is the integer after clicking on the% result is correct, if the decimal after clicking% of the result is wrong! The other is normal, seek advice: input value is string type, in JS how to correctly handle the figure 1 in the If part??
Figure-1
Figure-2
The HTML code is as follows
<body> <div id= "Calculator" > <div class= "LOGO" > <span class= "name" > Simple calculator </span> <span class= "Verson" > @walker </span> </div> <div id= "Shuru" > <!--screen input bar-->
;d IV class= "screen" > <input type= "text" id= "screenname" name= "Screenname" class= "Screens" > </div> </div> <div id= "Keys" > <!--J--> <!--first row--> <input type= "button" id= "7" Onclic k= "jsq (this.id)" value= "7" class= "buttons" > <input type= "button" id= "8" onclick= "jsq (this.id)" value= "8" class= " Buttons "> <input type=" button "id=" 9 "onclick=" jsq (this.id) "value=" 9 "class=" buttons "> <input type=" b Utton "id=" Back "onclick=" Tuige () "value=" Back "class=" buttons "> <input type=" button "id=" C "onclick=" Clearnum () "Value=" C "class=" buttons "style=" margin-right:0px "> <!--second row--> <input type=" button "id=" 4 "onclick=" JSQ (this.id) "value=" 4 "class= "Buttons" > <input type= "button" id= "5" onclick= "jsq (this.id)" value= "5" class= "buttons" > <input Type= "button" id= "6" onclick= "jsq (this.id)" value= "6" class= "buttons" > <input type= "button" id= "*" onclick= "jsq ( this.id) "value=" X "class=" buttons "> <input type=" button "id="/"onclick=" jsq (this.id) "value="/"class=" buttons "Style=" margin-right:0px > <!--third row--> <input type= "button" id= "1" onclick= "jsq (this.id)" value= "1" cl ass= "Buttons" > <input type= "button" id= "2" onclick= "jsq (this.id)" value= "2" class= "buttons" > <input ty Pe= "button" id= "3" onclick= "jsq (this.id)" value= "3" class= "buttons" > <input type= "button" id= "+" onclick= "jsq (th is.id) "value=" + "class=" buttons "> <input type=" button "id="-"onclick=" jsq (this.id) "value="-"class=" buttons " style= "margin-right:0px" > <!--fourth row--> <input type= "button" id= "0" onclick= "jsq (this.id)" value= "0" Clas s= "Buttons" > <Input type= "button" id= "onclick=" jsq (this.id) "value=" class= "buttons" > <input type= "button" id= "" oncli ck= "jsq (this.id)" value= "" class= "buttons" > <input type= "button" id= "%" onclick= "jsq (this.id)" value= "%" class=
"Buttons" > <input type= "button" id= "Eva" onclick= "Eva ()" value= "=" class= "buttons" style= "margin-right:0px" > </div> <div class= "Footer" > <span class= "aside" > Welcome to use javascript calculator </span> <span c lass= "link" > <a href= "#" title= "declaration" target= "_blank" > Feedback </a> </span> </div> </ Div> </body>
The
CSS code is as follows:
<style>/*basic reset*/*{margin:0;
padding:0;
Box-sizing:border-box;
FONT:14PX Arial,sans-serif;
} html{height:100%;
Background-color:lightslategrey;
} #calculator {margin:15px auto;
width:330px;
height:400px;
border:1px solid lightgray;
Background-color:darkgrey;
padding:15px; }/*logo*/.
logo{height:20px; }
.
LOGO. name{Float:left;
line-height:30px; }
.
LOGO. verson{float:right;
line-height:30px;
}/*screen*/#shuRu {margin-top:15px; screen{margin-top:5px;
width:300px;
height:40px;
Text-align:right;
padding-right:10px;
font-size:20px;
} #keys {border:1px solid lightgray;
height:223px;
margin-top:25px;
padding:8px;
#keys. last{margin-right:0px; footer{margin-top:20px;
height:20px;
}. Footer. link{Float:right}
#keys. buttons{Float:left;
width:42px;
height:36px;
Text-align:center;
Background-color:lightgray;
margin:0 17px 20px 0; } </style>
The JavaScript code is as follows:
<script>
var num = 0;//define the first input data
function jsq (num) {
//Get the current input
if (num== "%") {
document.getElementById (' Screenname '). Value=math.round (document.getElementById (' screenname '). Value)/100;
} else{
document.getElementById (' screenname '). Value + = document.getElementById (num). value
;
}
function Eva () {
//Calculate input result
document.getElementById ("Screenname"). Value = eval (document.getElementById (" Screenname "). value);
}
function Clearnum () {
//Clear 0
document.getElementById ("Screenname"). Value = null;
document.getElementById ("Screenname"). focus ();
}
function Tuige () {
//backspace
var arr = document.getElementById ("screenname");
Arr.value = arr.value.substring (0, arr.value.length-1);
}
</script>
Above this JavaScript implementation of simple Calculator effect "recommendation" is small to share all the content of everyone, hope to give you a reference, but also hope that we support the cloud habitat community.