时间:2021-07-01 10:21:17 帮助过:11人阅读
<!DOCTYPE html> <html> <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> <div> <p></p> </div> <div> <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);">=</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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持PHP中文网!
更多js实现简单的计算器功能相关文章请关注PHP中文网!