jQuery实现的简单在线计算器功能

本文实例讲述了jQuery实现的简单在线计算器功能。分享给大家供大家参考，具体如下：

先来看看运行效果图：

完整代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejQuery计算器/titlestyle type='text/css '！- .div { border : green 1pxborder-style : solid；宽度宽度：300像素文本对齐：居中；} span {背景色： # CCCCCC；font-size :32 px字体系列： '微软雅黑；}.输入{ border: 1px实线# 6666 ff }-/style style type=' text/CSS ' .div { border : green 1pxborder-style : solid；宽度宽度：300像素文本对齐：居中；} span {背景色： # CCCCCC；font-size :32 px字体系列： '微软雅黑；}.输入{ border: 1px实线# 6666FF}/style脚本src=' http : jquery-1。7 .2 .量滴js ' type=' text/JavaScript '/script脚本语言=' JavaScript '！- $(文档)。就绪（函数(){//传说中的ready $(“form div input : text”).addCLaSS(' input ')；//找到形式里面差异包含的投入标签类型为文本的元素jQuery强悍var num1，num2$('#jia ').click(function(){ num 1=parseFloat($(' # num 1 '))).val())；num2=parseFloat($('#num2 ')).val())；$(“# reset”).val(num 1 num 2)；});$('#jian ').click(function(){ num 1=parseFloat($(' # num 1 '))).val())；num2=parseFloat($('#num2 ')).val())；$(“# reset”).val(num 1-num 2)；});$(“# cheng”).click(function(){ num 1=parseFloat($(' # num 1 '))).val())；num2=parseFloat($('#num2 ')).val())；$(“# reset”).val(num 1 * num 2)；});$(“# Chu”).click(function(){ num 1=parseFloat($(' # num 1 '))).val())；num2=parseFloat($('#num2 ')).val())；$(“# reset”).val(num 1/num 2)；});});/////脚本/标题正文样式=' text-align : center ' formdiv class=' div ' divspanjquery简单计算器/span/divdiv第一个数：输入类型='text' id='num1' /divdiv第二个数：输入类型=' text ' id=' num 2 '/div输入类型=' button '值=' id=' Jia '输入类型=' button '值=' Jian '输入类型=' button '值=' Jian '输入类型=' button '值='/' id=' Chu '/div结果：输入类型=' text ' id=' reset '/div/div/form/body/HTMl PS:这里再为大家推荐几款在线计算工具供大家参考使用：

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

科学计算器在线使用_高级计算器在线计算：http://工具。JB 51。net/jis uan qi/jsqkexue

在线计算器_标准计算器：http://工具。JB 51。net/jis uan qi/jsq

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery操作DOM节点方法总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。