本文主要介绍了jQuery实现的简单在线计算器功能,结合完整实例形式分析了jQuery实现简单四则运算的相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。
先来看看运行效果图：
完整代码如下：/p>
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jQuery计算器
.p{
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 p input:text").addClass("input");//找到form里面p包含的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简单计算器
第一个数:
第二个数:
结果:
相关推荐：
