jQuery实现简易计算器

最新推荐文章于 2023-09-11 17:52:39 发布

Miguel_6

最新推荐文章于 2023-09-11 17:52:39 发布

阅读量491

点赞数

本文链接：https://blog.csdn.net/no_1back_up/article/details/108361590

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

布局如下：

在这里插入图片描述

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="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>

Miguel_6

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
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"
复制链接

扫一扫