用JS实现简单的四个计算器功能示例

本文举例说明了用JS实现的四个简单的计算器功能。分享给大家参考，如下：

我们先来看看跑步效果：

具体代码如下：

！DOCTYPE html html meta name=' content-TYPe ' content=' text/html；charset=UTF-8 ' head titlewww.jb51.net计算器计算器/标题！-将按键内容以字符串形式存储在文字框中当按钮为"="时，调用评价评价方法计算结果然后将结果输出文字框中-script type=' text/JavaScript ' var numresult；var strfunction onlicknum(nums){ str=document。GetElementByID(' nummessage ')；字符串。值=字符串。值nums}函数onclickclear(){ str=document。getelementbyid(' nummessage ')；str.value=}函数onclickresult(){ str=document。getelementbyid(' nummessage ')；numresult=eval(str。值)；str . value=numresult }/script/head body bgcolor=' AFFF '！-定义按键表格，每个按键对应一个事件触发-表格边框=' 1 ' align=' center ' bgColor=' # bbff 77 ' style=' height : 350 px；宽度： 270px' tr td colspan='4 '输入类型=' text ' id=' number ' style=' height : 90 px；宽度： 350像素；字号： 50px '/TD/tr TD输入类型='按钮'值=' 1 ' id=' 1 ' onclick=' onlicknum(1)' style=' height : 70px；宽度： 90px字号： 35px/TD TD输入类型='按钮'值=' 2 ' id=' 2 ' onclick=' onlicknum(2)' style=' height : 70px；宽度： 90pxfont-size : 35px/' TD TD TD输入类型=' button '值=' 3 ' id=' 3 ' onclick=' onlicknum(3)' style=' height : 70px；宽度： 90px字号： 35px/TD TD输入类型=' button ' value=' id=' add ' onclick=' onlicknum(')style=' height : 70px；宽度： 90pxfont-size: 35px' /td /tr tr td输入类型='按钮'值=' 4 ' id=' 4 ' onclick=' onlicknum(4)' style=' height : 70px；宽度： 90px字号： 35px/TD TD输入类型='按钮'值=' 5 ' id=' 5 ' onclick=' onlicknum(5)' style=' height : 70px；宽度： 90px字号： 35px/TD TD输入类型='按钮'值=' 6 ' id=' 6 ' onclick=' onlicknum(6)' style=' height : 70px；宽度： 90px字号： 35px/TD TD输入类型=' button ' value='-' id=' sub ' onclick=' onlicknum('-')' style=' height : 70px；宽度： 90pxfont-size: 35px' /td /tr tr td输入类型=' button ' value=' 7 ' id=' 7 ' onclick=' onlicknum(7)' style=' height : 70px；宽度： 90px字号： 35px/TD TD输入类型='按钮'值=' 8 ' id=' 8 ' onclick=' onlicknum(8)' style=' height : 70px；宽度： 90px字号： 35px/TD TD输入类型='按钮'值=' 9 ' id=' 9 ' onclick=' onlicknum(9)' style=' height : 70px；宽度： 90px字号： 35px/TD TD输入类型=' button ' value=' * ' id=' mul ' onclick=' onlicknum '(*)style=' height : 70px；宽度： 90pxfont-size : 35px '/TD/tr TD colspan=' 2 '输入类型='按钮'值=' 0 ' id=' 0 ' onclick=' onlicknum(0)' style=' height : 70px；宽度： 190像素；字号： 35px '/TD TD TD输入类型='按钮'值='，' id=' point ' onclick=' onclicknum(' .)' style=' height: 70px宽度： 90px字号： 35px/TD TD输入类型=' button ' value='/' id=' division ' onclick=' onlicknum '(/')' style=' height : 70px；宽度： 90pxfont-size : 35px '/TD/tr TD colspan=' 2 '输入类型='按钮'值=' Del ' id=' clear ' onclick=' onclickclear()' style=' height : 70px；宽度： 190像素；font-size : 35px '/TD/TD col span=' 2 '输入类型='按钮'值='=' id=' result ' onclick=' onclick result()' style=' height : 70px；宽度： 190像素；font-size : 35px '/TD/tr/table/body/HTMl:这里再为大家推荐几款计算工具供大家进一步参考借鉴：

在线一元函数（方程)求解计算工具：http://工具。JB 51。net/jisuanqi/equ _ jisuanqi

科学计算器在线使用_高级计算器在线计算：http://tools.jb51.net/jisuanqi/jsqkexue

在线计算器_标准计算器：http://tools.jb51.net/jisuanqi/jsq

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript字符与字符串操作技巧总结》、0103010。

希望本文对JavaScript编程有所帮助。