Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to realize the simple calculator function of native JS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to realize the simple calculator function of native JS".

Use html and css to write the basic structure and style of calculator, use native JS to realize the function of addition, subtraction, multiplication and division of calculator, can only calculate simple two-digit operation, do not support continuous addition or multiplication of three numbers, and so on. After the completion of one calculation, the next operation does not need clear, and the next operation can be done directly. The specific implementation is as follows:

Html structure:

1 2 3 + 4 56-7 8 9 * C 0 = /

Css style:

# box {width: 500px; height: 600px; border: 1px solid # 000000;} # display {width: 460px; height: 60px; margin: 15px; text-align: right; font-size: 60px; line-height: 60px; overflow: hidden / * overflow: hidden; overflow Hidden * / / * text-overflow: ellipsis appears when ellipsis; text overflows * / / * word-wrap: none; forcefully refuses line wrapping * / background: # ffffff;} .btn {width: 100px; height: 100px; border: 1px solid # 000000 Float: left; margin: 10px 11px; font-size: 40px; line-height: 100px; text-align: center; user-select: none;}

JS Code:

The global variable firstValue stores the number entered for the first time, and the input.value property of input is also a variable, which is both the content displayed on the page and the input value. Let these two values be calculated, and the results are displayed in the input box. Bool variable function: when an operation is completed, all values are cleared.

If you want to achieve the function of continuing to participate in the operation with the previous result, you can set a global variable result to store the result after each operation. The next time you enter the operation symbol, judge firstValue and result, and then decide which value to use. When the C button is clicked, all values are cleared and return to the initial state.

Var input = document.getElementById ("display"); var btnCollection = document.getElementsByClassName ("btn"); var type;var firstValue = 0 var var bool = false; for (var I = 0; I < click +) {/ / get each key and add a click event. Code execution in function will be triggered after clicking. BtnCollection.onclick = function () {if (bool) {input.value = "0"; firstValue = 0; type = undefined; bool = false;} / / input.value = is [XSS _ clean] / / displays the number clicked in the text box if (! isNaN (Number (This [XSS _ clean])) {input.value = Number (input.value + This [XSS _ clean]) .toString () } else if (type [XSS _ clean]! = = "C" & & his [XSS _ clean]! = "=") {firstValue = Number (input.value); type = his [XSS _ clean]; input.value = 0 } else if (This [XSS _ clean] = = "C") {firstValue = 0; type = undefined; input.value = "0" } else {switch (type) {case "+": input.value = (Number (input.value) + firstValue) .toString (); break Case "-": input.value = (firstValue-Number (input.value)) .toString (); break; case "*": input.value = (Number (input.value) * firstValue) .toString () Break; case "/": input.value = (firstValue / Number (input.value)) .toString (); break;} bool = true } at this point, I believe you have a deeper understanding of "how to achieve simple calculator function with native JS". 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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.