点击即可进入计算器页面
代码
代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!-- 样式 --> <style> tr,td{ text-align: center; } a{ /* 去除下划线 */ text-decoration: none; color: black; } a:hover{ background-color:darkgray; } </style> </head> <body> <!-- 表格 --> <table border="1px" cellpadding="1" cellspacing="1" align="center"> <tr> <td colspan="4" style="font-weight: 600;">计算器</td> </tr> <tr> <td colspan="4"> <input type="text" id="numInput" style="text-align: right;"/> </td> </tr> <tr> <td onclick="onClick(this)"><a href="#">C</a></td> <td onclick="onClick(this)"><a href="#">/</a></td> <td onclick="onClick(this)"><a href="#">*</a></td> <td onclick="onClick(this)"><a href="#">-</a></td> </tr> <tr> <td onclick="onClick(this)"><a href="#">7</a></td> <td onclick="onClick(this)"><a href="#">8</a></td> <td onclick="onClick(this)"><a href="#">9</a></td> <td onclick="onClick(this)" rowspan="2"><a href="#">+</a></td> </tr> <tr> <td onclick="onClick(this)"><a href="#">4</a></td> <td onclick="onClick(this)"><a href="#">5</a></td> <td onclick="onClick(this)"><a href="#">6</a></td> </tr> <tr> <td onclick="onClick(this)"><a href="#">1</a></td> <td onclick="onClick(this)"><a href="#">2</a></td> <td onclick="onClick(this)"><a href="#">3</a></td> <td onclick="onClick(this)" rowspan="2"><a href="#">=</a></td> </tr> <tr> <td onclick="onClick(this)"><a href="#">0</a></td> <td onclick="onClick(this)" colspan="2"><a href="#">.</a></td> </tr> </table> <script> var strs = ""; function onClick(count) { var numInput = document.getElementById("numInput"); // 接收显示 var str = count.innerText; // 如果等于(点击)C就清空 if(str == "C"){ numInput.value = ""; str = ""; strs = ""; } // 如果等于(点击)= 执行eval()算法 得到结果 if(str == "="){ str = eval(strs); numInput.value = ""; strs = str + ""; }else{ // 否则继续将内容写入字符串后 strs += str; } // 如果等于(点击) + - * / 就显示 + - * / if(str == "+" || str == "-" || str == "*" || str == "/"){ numInput.value = str; }else{ // 如果第一次不是(没点击)数字 将此内容(运算符)清除 if(isNaN(numInput.value)){ numInput.value = ""; } // 如果一直是数字则继续将内容写入字符串后 numInput.value += str; } } </script> </body> </html>
效果
样式效果图：
运行效果图：
