知识点：
fadeIn（）---计算器界面载入淡入效果
hover（）---鼠标移入移出某个元素时触发的事件
click（）---鼠标单击事件
css（）---对元素样式的操作
val（）---获取表单元素的值
text（）---对元素div内容的处理
substring（start,end）---从start到end截取字符串的子串
indexOf（）--字符串索引函数（在字符串中查找指定字符串，返回值是目标字符串在字符串的开始位置，返回-1表示没找到）
.length --- 获取字符串的长度
var $temp1 = parseFloat(str);---字符类型的转换
html:
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>soulsjie jQuery制作计算器</title><script src="libs/jquery-1.8.3.js"></script><link rel="stylesheet" href="css/soulsjie.css" type="text/css" /></head><body><div class="content"><div class="write_diban"><input type="text" value="0" class="view"/><div class="opp"><div class="bk">bk</div><div class="cl">C</div></div><div class="key"><div class="bt7">7</div><div class="bt8">8</div><div class="bt9">9</div><div class="chu">/</div><div class="bt4">4</div><div class="bt5">5</div><div class="bt6">6</div><div class="chen">*</div><div class="bt1">1</div><div class="bt2">2</div><div class="bt3">3</div><div class="chen">-</div><div class="bt0">0</div><div class="dian">.</div><div class="jia">+</div><div class="deng">=</div></div><div class="massage"></div></div></div><!--soulsjie 2017.11.10--></body><script src="js/soulsjie.js"></script></html>
css:
.content{margin:100px auto;background:#2b3037;height:500px;width:300px;box-shadow: 10px 10px 5px #888888;padding:5px;display:none;}.write_diban{height:100%;width:100%;margin:0 auto;background:#d9e4f1;border:1px solid #f00;border-radius:10px;text-align:center;}.write_diban > input{margin-top:10px;height:50px;width:285px;background:#d9e4f1;border:1px solid #8898ab;border-radius:5px;font-size:20px;font-weight:bold;text-align:right;}.key div ,.opp div{float:left;background:#f00;margin-left:8px;margin-top:8px;cursor:pointer;clolr:#1e395b;font-size:16px;background:#d9e4f1;border:1px solid #8898ab;border-radius:10px;line-height: 45px; }.opp div{width:45%;height:45px;}.key div {width:63px;height:45px;}js:
$(document).ready(function(){ $(".content").fadeIn(2000);});$(".key div,.opp div").hover(function(){$(this).css({"background":"#f00","color":"#fff","fontSize":"26px"});},function(){$(this).css({"background":"#d9e4f1","color":"#000","fontSize":"16px"});});var $num="";var $app_num=0;//运算符操作标记0表示无运算1加法。2减法。3乘法。4除法//数字键被按下时向显示框中添加内容$(".key div").click(function(){$num+=$(this).text();//将输入追加到显示框$(".view").val($num);});//退格键处理$(".bk").click(function(){var $aa=$(".view").val().substring(0, $(".view").val().length-1)$(".view").val($aa);});//清空显示框$(".cl").click(function(){$num="";$(".view").val($num);});//等号被按下时$(".deng").click(function(){//错误//用户的操作执行响应的计算if($num.indexOf("+")!=-1){//用户的操作是计算加法$app_num=1;}if($num.indexOf("-")!=-1){//用户的操作是计算加法$app_num=2;}if($num.indexOf("*")!=-1){//用户的操作是计算加法$app_num=3;}if($num.indexOf("/")!=-1){//用户的操作是计算加法$app_num=4;}switch($app_num){case 0: ?$num=""; ?$(".view").val($num); ?alert("输入有误"); ?break;case 1://执行加法操作//在字符串中将多余的=号截取var $aa=$(".view").val().substring(0, $(".view").val().length-1)num_arr=$aa.split("+");//将分割后的两个字符串进行类型转换var $temp1 = parseFloat(num_arr[0]);var $temp2 = parseFloat(num_arr[1]);//计算结果var $resout=$temp1+$temp2;$num+=$resout;//输出结果$(".massage").html($num);$num="";$(".view").val($num); ?break;case 2://执行减法操作//在字符串中将多余的=号截取var $aa=$(".view").val().substring(0, $(".view").val().length-1)num_arr=$aa.split("-");//将分割后的两个字符串进行类型转换var $temp1 = parseFloat(num_arr[0]);var $temp2 = parseFloat(num_arr[1]);//计算结果var $resout=$temp1-$temp2;$num+=$resout;//输出结果$(".massage").html($num);$num="";$(".view").val($num); ?break;case 3://执行乘法操作//在字符串中将多余的=号截取var $aa=$(".view").val().substring(0, $(".view").val().length-1)num_arr=$aa.split("*");//将分割后的两个字符串进行类型转换var $temp1 = parseFloat(num_arr[0]);var $temp2 = parseFloat(num_arr[1]);//计算结果var $resout=$temp1*$temp2;$num+=$resout;//输出结果$(".massage").html($num);$num="";$(".view").val($num); ?break;case 4://执行除法操作//在字符串中将多余的=号截取var $aa=$(".view").val().substring(0, $(".view").val().length-1)num_arr=$aa.split("/");//将分割后的两个字符串进行类型转换var $temp1 = parseFloat(num_arr[0]);var $temp2 = parseFloat(num_arr[1]);//计算结果var $resout=$temp1/$temp2;$num+=$resout;//输出结果$(".massage").html($num);$num="";$(".view").val($num); ?break;}});jQuery_计算器实例
原文地址：http://www.cnblogs.com/soulsjie/p/7815413.html