收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > jQuery > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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.gimoo.net/jisuanqi/equ_jisuanqi

科学计算器在线使用_高级计算器在线计算:
http://tools.gimoo.net/jisuanqi/jsqkexue

在线计算器_标准计算器:
http://tools.gimoo.net/jisuanqi/jsq

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

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

jQuery zTree树插件动态加载实例代码
需求:由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时zTree.init方法进行数据加载,将所有数据一次性加载到页面中。而在项目中家

jQuery遮罩层实例讲解
本文实例为大家分享了jQuery遮罩层展示的具体代码,供大家参考,具体内容如下1.1背景半透明遮罩层样式需要一个黑色(当然也可以其他)背景,且须

jQuery.ajax向后台传递数组问题的解决方法
今天重温了一个问题,jQuery.ajax向后台传递一个数组,而在后台接收不到该值。前台js方法部分代码如下://创建一个测试数组varboxIds=newArray();boxIds.push(12

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号