jquery 计算器

最新推荐文章于 2023-11-11 11:23:47 发布

liuli1990t

最新推荐文章于 2023-11-11 11:23:47 发布

阅读量700

点赞数

分类专栏： Jquery 文章标签：用jquery写的一款计算器小工具 jquery

本文链接：https://blog.csdn.net/liuli1990t/article/details/50467092

版权

Jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
input{width:32px;height:24px;}
#zero{width:68px;}
#j{height:56px;}
.result{width:175px;}
#text1{width:175px;}
div{width:180px;border:#CCC 1px solid;padding:10px;}
</style>
<script type="text/javascript">
$(function () {
var c=0;
var num1 = $("#text1");
var num2 = $(".secondnum");
var Btn = $(".btnvalue");
var Ys = $(".ys");
var Res = $(".result");
var de = $(".dy");
var clean = $(".clear");
//var cir =$(".point");
//9个数字点击按钮开始
Btn.click(function () {
//得到当前<em> </em>
var s = $(this).val(); //得到当前点击的数字
//这个是数字点击按钮
if (c == 0) {
//写入第一个文本框
num1.val(num1.val() + s);
Res.val("");
Res.val(num1.val());

} else {
num2.val(num2.val() + s);
Res.val("");
Res.val(num2.val());
}
});
//9个数字点击按钮结束,4个操作符点击按钮开始,写入第二个文本框
Ys.click(function () {
//4个按钮点击的时候改变 C
c = $(this).attr("id");
});

clean.click(function () {
Res.val("");
num1.val("");
num2.val("");
})
//4个操作符点击按钮结束,你怎么能把他写在这里面呢,你怎么能把4个操作符的按钮的事件写在9个按钮点击事件里面呢？
de.click(function () {
Res.val("");
if (c == 1) {
var a1 = num1.val();
var a2 = num2.val();
var ss = add(a1,a2);
Res.val(ss);
}
if (c == 2) {
var a1 = num1.val();
var a2 = num2.val();
var ss = minis(a1, a2);
Res.val(ss);
}
if (c == 3) {
var a1 = num1.val();
var a2 = num2.val();
var ss = cf(a1, a2);
Res.val(ss);

}
if (c == 4) {
var a1 = num1.val();
var a2 = num2.val();
var ss = cy(a1, a2);
Res.val(ss);
}
});

function add(a, b) {
return parseInt(a) + parseInt(b);
};
function minis(a, b) {
return a - b;
};
function cf(a, b) {
return a * b;
};
function cy(a, b) {
return a / b;
}

});
</script>
<body>
<div>
<table width="100" border="0">
<tr><input name="" type="text" id="text1" style=" display:none"/><input name="" style=" display:none;width:175px;" type="text" class="secondnum"/><input name="" type="text" class="result"/></tr>
<tr>
<td><input name="" type="button" value="←"/></td>
<td><input name="" class="" type="button" value="CE"/></td>
<td><input name="" class="clear" type="button" value="c" /></td>
<td><input name="" class="" type="button" value="+_"/></td>
<td><input name="" class="" type="button" value="√"/></td>
</tr>
<tr>
<td><input name="" class="btnvalue" type="button" value="7"/></td>
<td><input name="" class="btnvalue" type="button" value="8"/></td>
<td><input name="" class="btnvalue" type="button" value="9"/></td>
<td><input name="" class="ys" type="button" id="4" value="/"/></td>
<td><input name="" class="" type="button" value="% "/></td>
</tr>
<tr>
<td><input name="" class="btnvalue" type="button" value="4"/></td>
<td><input name="" class="btnvalue" type="button" value="5"/></td>
<td><input name="" class="btnvalue" type="button" value="6"/></td>
<td><input name="" class="ys" type="button" id="3" value="*"/></td>
<td><input name="" class="" type="button" value="1/x"/></td>
</tr>
<tr>
<td><input name="" class="btnvalue" type="button" value="1"/></td>
<td><input name="" class="btnvalue" type="button" value="2"/></td>
<td><input name="" class="btnvalue" type="button" value="3"/></td>
<td><input name="" class="ys" id="2" type="button" value="-"/></td>
<td rowspan="2"><input name="" id="j" class="dy" type="button" value="="/></td>
</tr>
<tr>
<td colspan="2"><input name="" class="btnvalue" id="zero" type="button" value="0"/></td>
<td><input name="" class="btnvalue" type="button" value="."/></td>
<td><input name="" class="ys" type="button" id="1" value="+"/></td>
</tr>
</table>
</div>

</body>

</html>

注：有些按钮的功能还没完善

liuli1990t

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 计算器

无标题文档input{width:32px;height:24px;}#zero{width:68px;}#j{height:56px;}.result{width:175px;}#text1{width:175px;}div{width:180px;border:#CCC 1px solid;padding:10px;} $(function
复制链接

扫一扫

专栏目录