js实现简单的计算器功能

时间：2021-05-26

话不多说，请看示例代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简单的计算器</title> <style> * { margin: 0 auto; padding: 0px; } html, body { width: 100%; height: 100%; } a { text-decoration: none; } .wrap { width: 30%; min-width: 250px; margin: 0 auto; border: 1px solid #b1b1b1; } .wrap .screen { width: 100%; height: 150px; background-color: #8d8d8d; } .wrap .screen .string { height: 100%; user-select: none; font-size: 30px; word-break: break-all; } .wrap .button-group { width: 100%; margin-top: 5px; } .wrap .button-group td { width: 25%; } .wrap .button-group td a { display: inline-block; height: 80px; text-align: center; background-color: #d5d5d5; color: #000; line-height: 80px; font-size: 25px; width: 100%; user-select: none; } .wrap .button-group td a:hover { background-color: #9d9d9d; color: #002a80; } .wrap .button-group td a.active { background-color: red; } </style></head><body><div class="wrap"> <div class="screen"> <p class="string"></p> </div> <div class="button-group"> <table cellspacing="5" cellpadding="10" border="0" width="100%"> <tr> <td><a href="javascript:void(0);">7</a></td> <td><a href="javascript:void(0);">8</a></td> <td><a href="javascript:void(0);">9</a></td> <td><a href="javascript:void(0);">*</a></td> </tr> <tr> <td><a href="javascript:void(0);">4</a></td> <td><a href="javascript:void(0);">5</a></td> <td><a href="javascript:void(0);">6</a></td> <td><a href="javascript:void(0);">/</a></td> </tr> <tr> <td><a href="javascript:void(0);">1</a></td> <td><a href="javascript:void(0);">2</a></td> <td><a href="javascript:void(0);">3</a></td> <td><a href="javascript:void(0);">+</a></td> </tr> <tr> <td><a href="javascript:void(0);">DEL</a></td> <td><a href="javascript:void(0);">0</a></td> <td><a href="javascript:void(0);" class="active">=</a></td> <td><a href="javascript:void(0);">-</a></td> </tr> </table> </div></div><script> var numString = document.getElementsByClassName("string")[0]; var buttonGroup = document.getElementsByTagName("a"); var screen = document.getElementsByClassName("string")[0]; var num1 = 0; var num2 = 0; var count = 0; var f; var flag = true; var flag2 = true; screen.onclick = function () { numString.innerHTML = ""; }; for (var i = 0; i < buttonGroup.length; i++) { buttonGroup[i].onclick = function () { switch (this.innerHTML) { case "0": case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9": if (!flag) { numString.innerHTML = ""; flag2 = true; } flag = true; numString.innerHTML += this.innerHTML; break; case "DEL": numString.innerHTML = numString.innerHTML.substr(0, numString.innerHTML.length - 1); break; case "+": case "-": case "*": case "/": f = this.innerHTML; count++; if (flag2) { flag = false; if (count == 1) { num1 = numString.innerHTML; } else { flag2 = false; num2 = numString.innerHTML; numString.innerHTML = eval(num1 + f + num2); num1 = numString.innerHTML; } } break; case "=": num2 = numString.innerHTML; numString.innerHTML = eval(num1 + f + num2); count = 0; flag = !flag; break; } } }</script></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章