本文实例为大家分享了jQuery实现计算器功能的具体代码，供大家参考，具体内容如下

动画效果：

计算器

*{

margin: 0;

padding: 0;

}

#calculator{

margin: 50px auto;

padding: 5px;

width: 230px;

height: 230px;

background: rgb(190,210,224);

}

#screen{

width: 230px;

height: 60px;

background: rgb(153,153,153);

border-radius: 5px;

text-align: right;

overflow: hidden;

}

#txt1{

height: 20px;

padding-top: 10px;

font-size: 10px;

}

#txt2{

height: 30px;

font-size: 20px;

}

#num{

float:left;

width: 130px;

}

#num input{

width: 40px;

height: 40px;

margin-top: 3px;

}

#operator{

float:right;

width: 70px;

height: 170px;

}

#operator input{

width: 70px;

height: 30px;

margin-top: 4px ;

}

#converter{

float:right;

width: 70px;

height: 170px;

}

$(function(){

var i=0;//i为清空标志，i=1时需要清空#txt2的数据

//获取输入的数字

$("#num input").click(function () {

//先判断#txt2中是否保存着上次计算的结果，如果是则将其清空

if (i===1){

$("#txt2").text("");

}

//保证数字以正确的格式显示

//使用switch语句实现

switch ($(this).val()){

case "C":

$("#txt2").text("");

break;

case ".":

if ($("#txt2").text().indexOf(".") != -1) {

break;

}else{$("#txt2").append($(this).val());}

break;

default:

if ($("#txt2").text() === "0") {

$("#txt2").text($(this).val());

}else{

$("#txt2").append($(this).val());

}

}

//使用if语句实现

/* if ($(this).val()=="C"){

$("#txt2").text(" ");

} else {

if ($("#txt2").text().indexOf(".") != -1) {

if ($(this).val() == ".") {

} else {

$("#txt2").append($(this).val());

}

} else if ($("#txt2").text() === "0") {

if ($(this).val() === ".") {

$("#txt2").append($(this).val());

} else {

$("#txt2").text($(this).val());

}

}else{

$("#txt2").append($(this).val());

}

}*/

i=0;//将清空标志设为0

});

//获取运算符

$("#operator input:not(:last)").click(function () {

$("#txt1").text($("#txt2").text()+$(this).val());

$("#txt2").text("");

});

//按下“=”键进行计算

$("#operator input").last().click(function () {

//使用eval()函数

//$("#txt2").text(eval($("#txt1").text()+$("#txt2").text()));

//使用常规方法

var str=$("#txt1").text();

var n1=parseFloat(str);

var n2=parseFloat($("#txt2").text());

var cal=str[str.length-1];

switch (cal){

case "+":

$("#txt2").text( n1+n2);

break;

case "-":

$("#txt2").text( n1-n2);

break;

case "*":

$("#txt2").text( n1*n2);

break;

case "/":

$("#txt2").text( n1/n2);

break;

default: break;

}

$("#txt1").text( "");

i=1;//将清空标志设为1

});

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。