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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
如何在vue 中引入使用jquery
Nov 10 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服务端图片生成缩略图的方法详解
2013/06/20 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
python简单分割文件的方法
2015/07/30 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
工作违纪检讨书
2014/02/17 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
中英文求职信范文
2015/03/19 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
python四种出行路线规划的实现
2021/06/23 Python
Python道路车道线检测的实现
2021/06/27 Python
服务器SVN搭建图文安装过程
2022/06/21 Servers