您的位置：首页 > Web前端 > JQuery

用jQuery改写的计算器

2015-11-10 00:00 756 查看

摘要: 用到了jQuery的选择器和DOM，功能方面和之前javascript写的一样

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jisuanqi-ren</title>
<style type="text/css">
.btn{
background-color:#4BF3A7;
height:50px;
width: 60px;
}

.kuang{
height: 50px;
width: 254px;
}

.div1{
background-color:#00FFCE;
width: 260px;
height: 400px;
}

.image{
float: right;
margin-right: 500px;
width:400px;
height: 400px;
}

.dengyu{
background-color:#4BF3A7;
height:50px;
width: 60px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="div2">
<h1><strong><center>计算器</center></strong></h1>
<table>
<input id="change" type="text" value="" >

<input style="height: 50px;width: 254px; " id="tuige" type="button" value="<-" onclick="tuige()">
<tr>
<td><input  type="button" value="1"></td>
<td><input  type="button" value="2"></td>
<td><input  type="button" value="3"></td>
<td><input  type="button" value="C" id="qingchu" ></td>
</tr>

<tr>
<td><input  type="button" value="4"></td>
<td><input  type="button" value="5"></td>
<td><input  type="button" value="6"></td>
<td><input type="button" value="=" id="dengyu" ></td>
</tr>
<tr>
<td><input type="button" value="7"></td>
<td><input type="button" value="8"></td>
<td><input type="button" value="9"></td>
<td><input type="button" value="0"></td>
</tr>

<tr>
<td><input id="fuhao" type="button" value="+"></td>
<td><input id="fuhao" type="button" value="-"></td>
<td><input id="fuhao" type="button" value="*"></td>
<td><input id="fuhao" type="button" value="/"></td>
</tr>

</table>
</div>

<script >
$(function(){

//数字按钮点击
$(".btn").click(function(){
var btn=$(this).val();
var kuang =$("#change").val();
//判断算式是否计算完成，如果完成就清零
var zhengze=/\b=\b/;
var test=zhengze.exec(kuang)
if(test=="=")
{
test="";
kuang=""
}
kuang += btn;
$("#change").val(kuang);
});

//计算符号点击
$("#fuhao").click(function(){
var fuhao1=$(this).val();
var kuang=$("#change").val();
kuang+=fuhao1;
$("#change").val(kuang);
});

//退格符号点击
$("#tuige").click(function(){
var kuang=$("#change").val();
$("#change").val(kuang.substring(0,kuang.length-1));
});

//清除符号点击
$("#qingchu").click(function(){
var kuang=$("#change").val();
$("#change").val("");
});

//等于号点击计算
$("#dengyu").click(function(){
var kuang=$("#change").val();
//通过正则来确定符号输入是否正确，刚刚发现也可判断算式是否输入完全
var zhengze2=/\d\D\d/;
var fuhao2=zhengze2.exec(kuang);
if (fuhao2===null) {
alert("error");
}
else{
var result=eval(kuang);
$("#change").val(kuang+"="+result);
}
});

});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html jQuery css

相关文章推荐

新的分享

章节导航