jQuery实现的简单在线计算器功能
时间:2019-03-30
本文章向大家介绍jQuery实现的简单在线计算器功能,主要包括jQuery实现的简单在线计算器功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了jQuery实现的简单在线计算器功能。分享给大家供大家参考,具体如下:
先来看看运行效果图:
完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery计算器</title> <style type="text/css"><!-- .div{ border:green 1px; border-style:solid; width:300px; text-align:center; } span{ background-color:#CCCCCC; font-size:32px; font-family:"微软雅黑"; } .input{ border: 1px solid #6666FF; } --></style><style type="text/css"> .div{ border:green 1px; border-style:solid; width:300px; text-align:center; } span{ background-color:#CCCCCC; font-size:32px; font-family:"微软雅黑"; } .input{ border: 1px solid #6666FF; }</style> <script src="jquery-1.7.2.min.js" type="text/JavaScript"></script> <script language="javascript"><!-- $(document).ready(function() {//传说中的ready $("form div input:text").addClass("input");//找到form里面div包含的input标签类型为text的元素 jQuery强悍 var num1,num2; $("#jia").click(function() { num1=parseFloat($("#num1").val()); num2=parseFloat($("#num2").val()); $("#reset").val(num1+num2); }); $("#jian").click(function() { num1=parseFloat($("#num1").val()); num2=parseFloat($("#num2").val()); $("#reset").val(num1-num2); }); $("#cheng").click(function() { num1=parseFloat($("#num1").val()); num2=parseFloat($("#num2").val()); $("#reset").val(num1*num2); }); $("#chu").click(function() { num1=parseFloat($("#num1").val()); num2=parseFloat($("#num2").val()); $("#reset").val(num1/num2); }); }); // --></script> </head> <body style="text-align:center"> <form> <div class="div"> <div><span>jQuery简单计算器</span></div> <div>第一个数:<input type="text" id="num1" ></div> <div>第二个数:<input type="text" id="num2" ></div> <div><input type="button" value=" + " id="jia"><input type="button" value=" - " id="jian"><input type="button" value=" * " id="cheng"><input type="button" value=" / " id="chu"></div> <div>结果:<input type="text" id="reset" /></div> </div> </form> </body> </html>
PS:这里再为大家推荐几款在线计算工具供大家参考使用:
在线一元函数(方程)求解计算工具:
http://tools.jb51.net/jisuanqi/equ_jisuanqi
科学计算器在线使用_高级计算器在线计算:
http://tools.jb51.net/jisuanqi/jsqkexue
在线计算器_标准计算器:
http://tools.jb51.net/jisuanqi/jsq
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery操作DOM节点方法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- H2 数据库插入时间的方法
- Spring 配置的 H2 控制台 frameOptions 导致无法访问
- Spring Boot 和 Hibernate 的 H2 数据库配置来进行启动测试
- Java时间处理-LocalDateTime简介
- iOS音视频接入 - TRTC iOS端真机日志导出
- jQuery根据填写的input的数值导出excel表格
- 小程序根据返回值英文渲染出对应的中文
- 小程序返回的时间戳转化成时间
- 小程序使用 组件库 vant-weapp详细教程
- 小程序数据渲染根据返回值计算百分比并且显示
- JS获取当前系统时间戳的方法
- TensorFlow 2建立神经网络分类模型——以iris数据为例
- 突击并发编程JUC系列-阻塞队列 BlockingQueue
- Matlab建立SVM,KNN和朴素贝叶斯模型分类绘制ROC曲线
- Python安装TensorFlow 2、tf.keras和深度学习模型的定义