效果如下：
参考程序：
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模拟计算器</title> <style> button { width: 39px; height: 30px; background-color: rgb(102, 240, 102); } button:hover { background-color: black; color: rgb(255, 249, 237); } button:active { background-color: rgb(79, 72, 72); color: white; } table{ background: rgb(192, 248, 109); } </style></head><body> <div> <table border="1px"> <tr style="text-align: cente白雪歌武判官归京r;"> <td colspan="4"> <input type="text" id="result" > 崩溃近义词 </td> </tr> <tr> <td><button id="le" onclick="getchar('(')">(</button></td> <td><button id="rg" onclick="getchar(')')">)</button></td> <td><button id="baifen" onclick="getchar('%')">%</button></td> <td><button id="c" onclick="clear1()">c</button></td> </tr> <tr> <td><button id="ven" onclick="getchar('7')">7</button></td> <td><button id="eight" onclick="getchar('8')">8</button></td> <td><button id="nine" onclick="getchar('9')">9</button></td> <td><button id="divi" onclick="getchar('/')">/</button></td> </tr> <tr> <td><button id="four" onclick="getchar('4')">4</button></td> <td><button id="five" onclick="getchar('5')">5</button></td> <td><button id="six" onclick="getchar('6')">6</button></td> <td><button id="mul" onclick="getchar('*')">*<刘惠璞为什么离开世纪佳缘;/button></td> </tr> <tr> <td><button id="one" onclick="getchar('1')">1</button></td> <td><button id="two" onclick="getchar('2')">2</button></td> <td><button id="three" onclick="getchar('3')">3</button></td> <td><button id="dec" onclick="getchar('-')">-</button></td> </tr> <tr> <td><button id="zero" onclick="getchar('0')">0</button></td> <td><button id="point" onclick="getchar('.')">.</button></td> <td><button id="=" onclick="getresult()">=</button></td> <td><button id="add" onclick="getchar('+')">+</button></td> </tr> </table> </div></body><script> // 点击按键返回按键值 function getchar(btnid) { var btns = document.getelementsbytagname("button") switch (btnid) { ca '+': tnum('+') break; ca '.': tnum('.') break; ca '=': tnum('=') break; ca '0': tnum('0') break; ca '1': tnum('1') break; ca '2': tnum('2') break; ca '3': tnum('3') break; ca '-': tnum('-') break; ca '4': tnum('4') break; ca '5': tnum('5') break; ca '6': tnum('6') break; ca '7': tnum('7') 怎样服用枸杞子 break; ca '8': tnum('8') break; ca '9': tnum('9') break; ca '/': tnum('/') break; ca '*': tnum('*') break; ca '(': tnum('(') break; ca ')': tnum(')') break; ca '%': tnum('%') break; default: break; } } // 清空显示屏 function clear1() { document.getelementbyid("result").value = "" } // 将数值显示到显示屏 function tnum(charcode) { var origin = document.getelementbyid('result'); origin.value += charcode; origin.innertext = origin.value; } // 计算结果 function getres战国策燕策ult(){ var res=eval(document.getelementbyid("result").value); // 追加'=' tnum('='); // 追加结果 tnum(res) }</script></html>备注：在做计算的时候，可以直接使用eval这个函数，我们就不用自己手动写加减乘除的计算逻辑了，大大简化了开发
例如：
var num=eval(‘3+3')
则运算结果是num=6
eval函数用法：
语法：eval（参数）,参数是js表达式，为字符串，可以包含变量以及已经存在对象的属性
返回值情况：
到此这篇关于 利用javascript写一个简单计算器的文章就介绍到这了,更多相关javascript写简单计算器内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
本文发布于:2023-04-03 22:57:17，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/ff5275336ca2e1cf6eee3c88384dc177.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：利用JavaScript写一个简单计算器.doc
本文 PDF 下载地址：利用JavaScript写一个简单计算器.pdf
| 留言与评论（共有 0 条评论） |
