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

This article mainly introduces the native JavaScript how to achieve the web version of the calculator, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

First of all, the style part of the web calculator does not want to be copied directly by handwriting.

Document * {margin: 0; padding: 0; box-sizing: border-box;} .cal {width: 420px; margin: 100px auto; background-color: # E6E6E6; padding: 2px; overflow: hidden } .show {position: relative; width: 416px; height: 120px; font-size: 50px; line-height: 50px; font-weight: 700;} .show button {display: none; position: absolute; top:-2px Right:-2px; width: 60px; height: 40px; line-height: 40px; text-align: center; border: transparent; background-color: # E6E6E6; font-size: 30px; font-weight: 100; cursor: pointer } .show button:hover {background-color: # e81123; color: # f0f0f0} .res, .left, .right {position: absolute; bottom: 0; height: 60px; line-height: 60px; padding: 0 3px } .res {right: 0; / * width: 100%; * / text-align: right;} .left {display: none; background-color: # E6E6E6;} .right {display: none; right: 0 Background-color: # E6E6E6;} .left: hover, .right: hover {color: # 2e8eda;} .keyboard {display: flex; flex-wrap: wrap; justify-content: center;} .btn {display: flex Justify-content: center; width: 100px; height: 60px; line-height: 60px; margin: 2px; background-color: # f0f0f0; border: transparent; font-size: large;} .btn: hover {background-color: # d6d6d6 Digital {background-color: # fafafa; font-weight: 700;}. Background-color: # 8abae0;} .digital: hover {background-color: # 4599db } × 0% CE C del 1 Compact x x ² ²√ x / 7 8 9 x 4 5 6- 123 + + /-0. =

Js section:

Const bt = document.querySelectorAll ('.keyboard button') const close = document.querySelector (' .close') const res = document.querySelector ('.res') / / let k = 0let onelet twofunction arr (num) {bt [num] .onclick = function () {res.innerText + = bt [num] .innerText res.innerText = parseFloat (res.innerText) / / console.log (one)}} / / Function fn () {if (res.innerText.length > 8) {res.innerText = res.innerText.slice (0) 10)} if (res.innerText = = 'NaN') {res.innerText = 0}} / / when the operation symbol is clicked, function symbol (str Fu) {bt [str] .onclick = function () {return + if (k > 1) {return} one = parseFloat (res.innerText) / / switch (fu) {/ / case'+': / / one + = one / / break / / case'-': / / one-= one / / break; / / case'*': / / one * = one / / break; / / case'/': / / one / = one / / break / /} res.innerText =''close.style.display =' block' close.innerText = bt [str] .innerText console.log (one)}} arr (21) arr (18) arr (17) arr (16) arr (14) arr (13) arr (12) arr (10) arr (9) arr (8) arr (22) / / Operand symbol (0) symbol (7,'/') symbol (11) '*') symbol (15, -') symbol (19 +') console.log (bt [22] .innerText) bt [22] .onclick = function () {res.innerText + = bt [22] .innerText console.log} bt [23] .onclick = function () {two = parseFloat (res.innerText) switch (close.innerText) {case'%': / / toFixed (11) keep 11 decimal places res.innerText = one% two K = 0 break Case'+': res.innerText = one + two k = 0 break; case'-': res.innerText = one-two k = 0 break; case'x: res.innerText = one * two k = 0 break Case'/': res.innerText = one / two k = 0 break } / / console.log (res.innerText.length) fn ()} bt [1] .onclick = function () {res.innerText =''} bt [2] .onclick = function () {res.innerText ='0' close.innerText ='x' close.style.display = 'one = 0 two = 0} bt [3] .onclick = function () {res.innerText = res.innerText.slice (0) Res.innerText.length-1) if (res.innerText.length = 0) {res.innerText ='0' return}} bt [4] .onclick = function () {res.innerText = 1 / parseFloat (res.innerText) fn ()} bt [5] .onclick = function () {res.innerText = parseFloat (res.innerText) * parseFloat (res.innerText) fn ()} bt [6] .onclick = function () {res.innerText = Math.sqrt (parseFloat (res.innerText)) fn ()} bt [20] .onclick = function () {res.innerText = 0-parseFloat (res.innerText) fn ()} Thank you for reading this article carefully I hope the article "how to implement the web version calculator of native JavaScript" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you 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.