Created
November 9, 2018 21:56
-
-
Save tianmingzuo/7a6730b4ad9ccae45a335d92ebe42c3c to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta charset="utf-8"> | |
| <title>JS Calculator</title> | |
| <!--<link rel="stylesheet" type="text/css" href="calculator.css"> --> | |
| <style> | |
| div table{ | |
| width: 360px; | |
| height: 460px; | |
| border 5px ridge pink; | |
| margin: 20px auto; | |
| background-color: #81d4fa; | |
| } | |
| .button{ | |
| width: 80px; | |
| height: 60px; | |
| text-align: center; | |
| font-size: 26px; | |
| font-weight: bold; | |
| border-radius: 10px; | |
| } | |
| .text{ | |
| color: black; | |
| width: 300px; | |
| height: 60px; | |
| margin: 2px 15px 2px 25px; | |
| border-radius: 10px; | |
| text-align: right; | |
| background-color: white; | |
| } | |
| #Exp, #BS, #CE, #Sign{ | |
| font-size: 18px; | |
| color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <table> | |
| <tr><td colspan=4 id="calArea" class="text" type="text"></td></tr> | |
| <tr> | |
| <td><input class="button" type="button" value="Exp" id="Exp" onclick="computing(this)"></td> | |
| <td><input class="button" type="button" value="CE" id="CE" onclick="clearAll()"></td> | |
| <td><input class="button" type="button" value="Back" id="BS" onclick="backSpace()"></td> | |
| <td><input class="button" type="button" value="+/-" id="Sign" onclick="exSign()"></td> | |
| </tr> | |
| <tr> | |
| <td><input class="button" type="button" value="1" onclick="getDigits(this)"></td> | |
| <td><input class="button" type="button" value="2" onclick="getDigits(this)"></td> | |
| <td><input class="button" type="button" value="3" onclick="getDigits(this)"></td> | |
| <td><input class="button" type="button" value="4" onclick="getDigits(this)"></td> | |
| </tr> | |
| <tr> | |
| <td><input class="button" type="button" value="5" onclick="getDigits(this)"></td> | |
| <td><input class="button" type="button" value="6" onclick="getDigits(this)"></td> | |
| <td><input class="button" type="button" value="7" onclick="getDigits(this)"></td> | |
| <td><input class="button" type="button" value="8" onclick="getDigits(this)"></td> | |
| </tr> | |
| <tr> | |
| <td><input class="button" type="button" value="9" onclick="getDigits(this)"></td> | |
| <td><input class="button" type="button" value="0" onclick="getDigits(this)"></td> | |
| <td><input class="button" type="button" value="." onclick="getDigits(this)"></td> | |
| <td><input class="button" type="button" value="=" onclick="getResult(this)"></td> | |
| </tr> | |
| <tr> | |
| <td><input class="button" type="button" value="+" onclick="computing(this)"></td> | |
| <td><input class="button" type="button" value="-" onclick="computing(this)"></td> | |
| <td><input class="button" type="button" value="*" onclick="computing(this)"></td> | |
| <td><input class="button" type="button" value="/" onclick="computing(this)"></td> | |
| </tr> | |
| </table> | |
| </div> | |
| <script> | |
| var result; //for saving the number before hitting operator signs | |
| var operator; //for saving operator | |
| var isEqualSign = false; | |
| var txt = document.getElementById("calArea"); | |
| txt.value = ""; | |
| function getDigits(dgt) { | |
| if(isEqualSign) { | |
| isEqualSign = false; | |
| } | |
| if(txt.value.indexOf(".")>-1 && dgt.value===".") { | |
| return false; | |
| } | |
| txt.value += dgt.value; | |
| txt.innerHTML = txt.value; | |
| } | |
| function backSpace() { | |
| txt = document.getElementById("calArea"); | |
| txt.value = txt.value.substr(0, txt.value.length-1); | |
| txt.innerHTML = txt.value; | |
| } | |
| function clearAll() { | |
| txt.value = ""; | |
| txt.innerHTML = ""; | |
| result = ""; | |
| operator = ""; | |
| isEqualSign = false; | |
| } | |
| function exSign() { | |
| txt.value = parseFloat(txt.value); | |
| if(txt.value === 0) { | |
| txt.value = txt.value; | |
| }else{ | |
| txt.value = -txt.value; | |
| } | |
| txt.innerHTML = txt.value; | |
| } | |
| function computing(opSign) { | |
| operator = opSign.value; | |
| if(txt.value==="") { | |
| return false; | |
| } | |
| result = txt.value; | |
| txt.value = ""; | |
| } | |
| function getResult() { | |
| var temp = ""; | |
| var firstValue = parseFloat(result); | |
| if(operator === "+") { | |
| temp = firstValue + parseFloat(txt.value); | |
| }else if(operator === "-") { | |
| temp = firstValue - parseFloat(txt.value); | |
| }else if(operator === "*") { | |
| temp = firstValue * parseFloat(txt.value); | |
| }else if(operator === "/") { | |
| temp = firstValue / parseFloat(txt.value); | |
| }else if(operator === "Exp") { | |
| temp = firstValue * firstValue; | |
| } | |
| txt.value = temp; | |
| txt.innerHTML = txt.value; | |
| isEqualSign = true; | |
| result = ""; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment