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


Posted in jQuery onMay 11, 2017

本文实例讲述了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>
jQuery 相关文章推荐
jQuery树插件zTree使用方法详解
May 02 jQuery
jQuery操作css样式
May 15 jQuery
jQuery返回定位插件详解
May 15 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
JQuery实现定时刷新功能代码
May 09 #jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 #jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 #jQuery
jquery平滑滚动到顶部插件使用详解
May 08 #jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 #jQuery
jquery replace方法去空格
May 08 #jQuery
You might like
php文件缓存类汇总
2014/11/21 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
如何基于python实现不邻接植花
2020/05/01 Python
用Python 执行cmd命令
2020/12/18 Python
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
师范生求职自荐信
2014/06/14 职场文书
法制宣传口号
2014/06/16 职场文书
股东授权委托书范文
2014/09/13 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
2015年采购部工作总结
2015/04/23 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
python前后端自定义分页器
2022/04/13 Python