简易计算机在线使用方法,jQuery实现简单在线计算器方法

本文主要介绍了jQuery实现的简单在线计算器功能,结合完整实例形式分析了jQuery实现简单四则运算的相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。

先来看看运行效果图：

完整代码如下：/p>

"http://www.php.cn/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简单计算器

第一个数:

第二个数:

结果:

相关推荐：