Javascript: simple calculator effect [recommended], javascript Calculator
The final result is-2. There is a bug: The result is correct when you click "%" after the integer. If you click "%" after the decimal number, the result is incorrect! Everything else is normal. Please advise: the input value is of the string type. In JS, how can I correct the if part in-1 ??
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 --> <div class = "screen"> <input type = "text" id = "screenName" name = "screenName" class = "screen"> </div> </div> <div id = "keys"> <! -- J --> <! -- Row 1 --> <input type = "button" id = "7" onclick = "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 =" button "id =" Back "onclick =" tuiGe () "value =" Back "class =" buttons "> <input type =" button "id =" C "onclick =" clearNum () "value =" C "class =" buttons "styl E = "margin-right: 0px"> <! -- Row 2 --> <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 "sty Le = "margin-right: 0px"> <! -- Row 3 --> <input type = "button" id = "1" onclick = "jsq (this. id) "value =" 1 "class =" buttons "> <input type =" button "id =" 2 "onclick =" jsq (this. id) "value =" 2 "class =" buttons "> <input type =" button "id =" 3 "onclick =" jsq (this. id) "value =" 3 "class =" buttons "> <input type =" button "id =" + "onclick =" jsq (this. id) "value =" + "class =" buttons "> <input type =" button "id ="-"onclick =" jsq (this. id) "value ="-"class =" buttons "sty Le = "margin-right: 0px"> <! -- Row 4 --> <input type = "button" id = "0" onclick = "jsq (this. id) "value =" 0 "class =" buttons "> <input type =" button "id =" 00 "onclick =" jsq (this. id) "value =" 00 "class =" buttons "> <input type =" button "id = ". "onclick =" 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 the JavaScript calculator </span> <span class =" link "> <a href = "#" title = "Declaration" target = "_ blank"> feedback </a> </span> </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) {// obtain 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 the 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 () {// return var arr = document. getElementById ("screenName"); arr. value = arr. value. substring (0, arr. value. length-1) ;}</script>
The above javascript Implementation of the simple calculator effect [recommended] is all the content shared by the small editor. I hope to give you a reference, and I hope you can also support the help house.