这篇文章主要介绍了原生JavaScript如何实现网页版计算器，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
首先是网页计算器的样式部分不想手写直接复制即可
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { 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; 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; } .equal { background-color: #8abae0; } .equal:hover { background-color: #4599db; } </style></head> <body> <div class="cal"> <div class="show"> <button class="close">×</button> <div class="res">0</div> <div class="left"><</div> <div class="right">></div> </div> <div class="keyboard"> <!-- 0 --> <button class="btn percent">%</button> <!-- 1 --> <button class="btn clearOne">CE</button> <!-- 2 --> <button class="btn clearAll">C</button> <!-- 3 --> <button class="btn back">del</button> <!-- 4 --> <button class="btn div1">1/x</button> <!-- 5 --> <button class="btn square">x²</button> <!-- 6 --> <button class="btn sqrt">²√x</button> <!-- 7 --> <button class="btn div">÷</button> <!-- 8 --> <button class="btn digital">7</button> <!-- 9 --> <button class="btn digital">8</button> <!-- 10 --> <button class="btn digital">9</button> <!-- 11 --> <button class="btn mul">x</button> <!-- 12 --> <button class="btn digital">4</button> <!-- 13 --> <button class="btn digital">5</button> <!-- 14 --> <button class="btn digital">6</button> <!-- 15 --> <button class="btn sub">-</button> <!-- 16 --> <button class="btn digital">1</button> <!-- 17 --> <button class="btn digital">2</button> <!-- 18 --> <button class="btn digital">3</button> <!-- 19 --> <button class="btn add">+</button> <!-- 20 --> <button class="btn neg">+/-</button> <!-- 21 --> <button class="btn digital">0</button> <!-- 22 --> <button class="btn digital">.</button> <!-- 23 --> <button class="btn equal">=</button> </div> </div> <script src="./计算机.js"></script></body> </html>js部分:
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 } } //当点击的是运算符号的时候function symbol(str, fu) { bt[str].onclick = function () { k++ 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)//运算符号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(565)}bt[23].onclick = function () { two = parseFloat(res.innerText) switch (close.innerText) { case '%': //toFixed(11)保留11位小数 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()}感谢你能够认真阅读完这篇文章，希望小编分享的“原生JavaScript如何实现网页版计算器”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
