Get the App
SLTechnology News&Howtos  ›  Internet Technology  › 

How to write the Code of simple Calculator with JavaScript

Shulou Source: shulou.com Published: 2022-05-31 11:43:56 09月16日 Update

This article mainly explains "how to write the simple calculator code for JavaScript". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to write the simple calculator code with JavaScript.

The specific code is as follows

Title * {padding: 0; margin: 0;} li {list-style: none;} body {background: # 940032;} # counter {width: 500px; height: 420px; background: # 939; margin: 50px auto 0; position: relative;} # counter h3 {line-height: 42px; padding-left: 15px; font-size: 14px; font-family: arial; color: # ff3333;} # counter a {font-weight: normal Text-decoration: none; color: # ff3333;} # counter a:hover {text-decoration: underline;} # bg {width: 280px; height: 200px; border: 3px solid # 680023; background: # 990033; filter: alpha (opacity=80); opacity: 0.8; position: absolute; left: 50%; top: 115px; margin-left:-141px;} # counter_content {width: 250px; position: absolute; top: 130px; left 130px: Z-index: 1;} # counter_content h4 {margin-bottom: 10px;} # counter_content h4 input {border: none; width: 223px; height: 30px; line-height: 30px; padding: 010px; background: url (img/ico.png) no-repeat; text-align: right; color: # 333; font-size: 14px; font-weight: bold;} # counter_content div {width: 250px;} # counter_content input {width: 60px Height: 30px; line-height: 30px; float: left; background: url (img/ico.png) no-repeat-303px 0; text-align: center; color: # fff; cursor: pointer; margin: 0 1px 4px 0; border: 0;} # counter_content div > input:hover {background: url (img/ico.png) no-repeat-243px 0;} # counter p {width: 500px; position: absolute; bottom: 20px; left: 0; color: # ff3333 Text-align: center; font-size: 12px;} simple calculation var showInput = document.getElementById ("input1"); var isClear = false; var tempStr = ""; var clacType = ""; var isContinue = true; function kick (clickValue) {switch (clickValue) {case "=": if (tempStr! = "& clacType! =") {showInput.value = clac (tempStr, showInput.value, clacType) IsContinue = false; clacType = "";} break; case "+": case "-": case "*": case "/": / / if the stored operator is not empty, it means continuous operation if (clacType! = "&! isContinue) {/ / execute the calculation tempStr = clac (tempStr, showInput.value, clacType) first; isClear = true; clacType = clickValue } else {tempStr = showInput.value; / / the stored character isClear = true;// after clicking the operator indicates that the operator clacType = clickValue;// stored operator} isContinue = true; break; case "C": showInput.value = "0"; isClear = false; tempStr = ""; clacType = ""; break Default:// ordinary numeric button click showInput.value = showInput.value = = "0"? "": showInput.value; isContinue = false; if (isClear) {showInput.value = ""; showInput.value + = clickValue; isClear = false;} else {showInput.value + = clickValue;} break } function clac (num1, num2, type) {switch (type) {case "+": return Number (num1) + Number (num2); case "-": return Number (num1)-Number (num2); case "*": return Number (num1) * Number (num2); case "/": return Number (num1) / Number (num2); default: break }} at this point, I believe you have a deeper understanding of "how to write the simple calculator code for JavaScript". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Tags: Code simple operator calculator content learning practical ordinary deeper interest character utility practical button simple operation number method more friends website Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Shulou Information MariaDB Huawei MySQL vpn