話不多說，請看示例代碼：
<!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>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
