jQuery_计算器实例
知识点:
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; } });