This article shares the specific code of JavaScript to implement the web version of the calculator for your reference. The specific content is as follows Because I was bored and looked through the system software on my computer, I came across the calculator function, so I will simply write about the functions of this calculator. This web version of the calculator has all the basic functions, but it is not very complete, so it is for reference only. First, if you don't want to write the style of the web calculator by hand, you can just copy it. <!DOCTYPE html> <html lang="en"> <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; /* 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; } .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="./computer.js"></script> </body> </html> js part: const bt = document.querySelectorAll('.keyboard button') const close = document.querySelector('.close') const res = document.querySelector('.res') //When the number is clicked, let k = 0 let one let two function arr(num) { bt[num].onclick = function () { res.innerText += bt[num].innerText res.innerText = parseFloat(res.innerText) // console.log(one) } } //Decimal point //Keep the result decimal function fn() { if (res.innerText.length > 8) { res.innerText = res.innerText.slice(0, 10) } if (res.innerText == 'NaN') { res.innerText = 0 } } //When the operator is clicked, 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) //Operation symbol 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) retains 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() } The above code makes a simple computer. I hope it will be helpful for everyone's study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
>>: Detailed analysis of MySQL 8.0 memory consumption
Scenario How to correctly render lists up to 1000...
Today I got familiar with the mouse zooming effect...
Preface Seeing the title, everyone should be thin...
When modifying Magento frequently, you may encount...
Table of contents Overview Canvas API: Drawing Gr...
1. Enter the command mysqld --skip-grant-tables (...
The so-called connection limit in Nginx is actual...
This article example shares the specific code of ...
React Lifecycle Two pictures to help you understa...
Table of contents 1. BOM Introduction 1. JavaScri...
1. Demand The backend provides such data for the ...
1. Import the module and define a validation stat...
HTML validate refers to HTML validation. It is the...
The image can be saved on hub.docker.com, but the...
Table of contents 1. Install JDK Manual Installat...