jQuery实现简易的计算器
作者：Miguel_6
这篇文章主要为大家详细介绍了jQuery实现简易的计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery实现简易的计算器的具体代码，供大家参考，具体内容如下
布局如下：
css代码
#d1{
width: 400px;
height: 500px;
/*background-color: #A9A9A9;*/
float: left;
margin: 20px 0px 0px 500px;
font-size: 30px;
font-weight: bold;
font-family: 宋体;
text-align: center;
line-height: 70px;
background:url("../img/1 (20).jpg");
background-repeat:no-repeat;
background-size:400px 500px;
}
#d2{
width: 100%;
height: 4%;
color: aqua;
float: left;
border:0px red solid;
text-align: left;
line-height: 18px;
font-size: 20px;
font-family: "微软雅黑";
}
#d3{
width: 100%;
height: 10%;
color: aqua;
float: left;
border:0px red solid;
text-align: left;
line-height: 18px;
margin-top: 3px;
margin-bottom: 9px;
opacity: 0.8;
}
.c1{
width: 22.1%;
height: 15%;
background-color: #FFC0CB;
cursor: pointer;
float: left;
border-radius: 12px;
margin: 0px 0px 9px 9px;
opacity: 0.8;
}
.c1:hover{
background-color: aqua;
}布局+jQuery：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<link href="计算器.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<div id=d1>
<div id=d2>● ● ●</div>
<div id=d3>
<input type="text" id="t" style="border:1px bisque solid;width: 394px;height:48px;background-color:#FF6600;font-size: 25px;" />
</div>
<div class=c1 value="AC">AC</div>
<div class=c1 value="+/-">+/-</div>
<div class=c1 value="%">%</div>
<div class=c1 value="/">÷</div>
<div class=c1 value="7">7</div>
<div class=c1 value="8">8</div>
<div class=c1 value="9">9</div>
<div class=c1 value="*">×</div>
<div class=c1 value="4">4</div>
<div class=c1 value="5">5</div>
<div class=c1 value="6">6</div>
<div class=c1 value="-">-</div>
<div class=c1 value="1">1</div>
<div class=c1 value="2">2</div>
<div class=c1 value="3">3</div>
<div class=c1 value="+">+</div>
<div class=c1 value="0">0</div>
<div class=c1 value="保留">保留</div>
<div class=c1 value=".">.</div>
<div class=c1 onclick="answer()">=</div>
<script src="../JQuery/jquery-3.4.1.js" ></script>
<script>
var store = '';
var bo1 = false; //是否 按了 = 的变量
$(".c1:lt(19)").click(function(){
var x1=$(this).attr("value");
get(x1);
});
function get(x) {
var a = $("*:text");
if(x == "保留") {
bo1 = false;
} else if(x == "AC") {
a.val("0");
bo1 = true;
} else if(x == "+/-") {
a.val(0 - a.val());
} else {
store = x;
var v = a.val();
if(bo1 == true) {
a.val(x);
bo1 = false;
} else {
a.val(v + x);
}
}
}
function answer() {
var a = $("*:text");
var x = a.val();
var y = eval(x);
a.val(y);
bo1 = true;
}
</script>
</div>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。