求根计算机在线,jQuery实现的简单在线计算器功能

本文实例讲述了jQuery实现的简单在线计算器功能。分享给大家供大家参考，具体如下：

先来看看运行效果图：

完整代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jQuery计算器

.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;

}

-->

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;

}

$(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);

});

});

// -->

jQuery简单计算器

第一个数:

第二个数:

结果:

PS：这里再为大家推荐几款在线计算工具供大家参考使用：

在线一元函数(方程)求解计算工具：http://tools.ddpool.cn/jisuanqi/equ_jisuanqi

科学计算器在线使用_高级计算器在线计算：http://tools.ddpool.cn/jisuanqi/jsqkexue

在线计算器_标准计算器：http://tools.ddpool.cn/jisuanqi/jsq

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