jQuery实现的简单在线计算器功能
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要介绍了jQuery实现的简单在线计算器功能,结合完整实例形式分析了jQuery实现简单四则运算的相关操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现的简单在线计算器功能。分享给大家供大家参考,具体如下:
先来看看运行效果图:
完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://.w3./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:这里再为大家推荐几款在线计算工具供大家参考使用:
在线一元函数(方程)求解计算工具:
科学计算器在线使用_高级计算器在线计算:
在线计算器_标准计算器:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
上一篇:学习使用Bootstrap栅格系统
下一篇:学习使用Bootstrap页面排版样式
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程