前端学习Task1：计算器_概率计算器29赵o5757cc-CSDN博客

本文链接：https://blog.csdn.net/Michellezhaozy/article/details/102691575

前端学习Task1：计算器

前言

开始学习前端有一段时间了，之前通过MOOC的网络课程大概掌握了HTML、CSS、JS的基本知识，所以想通过实践来提高自己的编程技巧，熟悉编程语言。这个小计算器算是我自己捣鼓出来的第一个小成品，主要是参考苹果自带的计算器来写的，所以还有一些Bug+冗余，欢迎大家指正。

样式

Alt

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Calculator</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ol,ul{
			list-style-type: none;
		}
		.container{
			background-color: #000;
			width: 800px;
			height: 1400px;
			margin: 0 auto;
			border-radius: 50px;
		}
		.display{
			width: 800px;
			height: 400px;
			text-align: right;
			font: 110px "微软雅黑";
			color: #fff;
			position: absolute;
		}
		.display #display_top{
			width: 800px;
			height: 220px;
			position: absolute;
		}
		.display #display_bottom{
			width: 800px;
			height: 180px;
			position: absolute;
			top: 220px;
		}
		.display text{
			position: absolute;
			right: 20px;
			bottom: 10px;
		}
		.key{
			height: 1100px;
			width: 800px;
			position: absolute;
			top: 350px;
			margin-top: 50px;
			margin-left: 10px;
		}
		.key ul li button{
			height: 170px;
			width: 170px;
			border-radius: 85px;
			background-color: #a5a5a5;
			border: none;
			/*去掉外边框*/
			outline: none;
			color: #fff;
			font-size: 70px;
			margin: 10px;
			/*实现鼠标移走后淡出效果*/
			-webkit-transition-duration:1s;
		}
		.key ul li button:hover{
			background-color: #d9d9d9;
			-webkit-transition-duration:0s;
		}
		.key ul li .num:hover{
			background-color: #737373;
		}
		.key ul li .opera:hover{
			background-color: #f3c995;
		}
		.key ul li #clear{
			color: #000;
		}
		.key ul li #trans{
			color: #000;
			background: #a5a5a5 url('img/3.png') no-repeat center center; 
		}
		.key ul li #percent{
			color: #000;
		}
		.key ul li #zero{
			width: 370px;
		}
		.key ul li .opera{
			background-color: #f09a37;
		}.key ul li #equal{
			background-color: #f09a37;
		}
		.key ul li .num{
			background-color: #333333;
		}
		.key ul li #dot{
			background-color: #333333;
		}
	</style>
</head>
<body>
	<script src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous">
	</script>
	<script>
		$(document).ready(function(){
			var num1 = 0;
			var num2 = 0;
			var opera = 0;
			var round = 0;
			var flag = 0;
			var cont = null;
			// 清除操作
			$("#clear").click(function(){
				$("#display_bottom").text(0);
				$("#display_top").text("");
				num1 = 0;
				num2 = 0;
				opera = 0;
				cont = null;
				round = 0;
				flag = 0;
			});
			// 改变正负
			$("#trans").click(function(){
				if (opera == 0) {
					num1 = -num1;
					$("#display_bottom").text(num1);
				}
				else {
					num2 = -num2;
					$("#display_bottom").text(num2);
				}
			});
			// %操作
			$("#percent").click(function(){
				if (opera == 0) {
					num1 = num1 / 100;
					$("#display_bottom").text(num1);
				}
				else {
					num2 = num2 / 100;
					$("#display_bottom").text(num2);
				}
			});
			$("#equal").click(function(){
				result();
			});
			// 输出结果
			 function result(){
			 	// 限制输出时公式的长度
			 	var temp1 = num1.toString();
			 	var temp2 = num2.toString();
			 	if (temp1.length >= 6) {
			 		temp1 = Number(temp1);
			 		temp1 = temp1.toExponential(1);
			 	}if (temp2.length >= 6) {
			 		temp2 = Number(temp2);
			 		temp2 = temp2.toExponential(1);
			 	}
			 	num1 = Number(num1);
			 	num2 = Number(num2);
			 	switch(opera){
			 		case 1:
			 			num1 = num1+num2;
			 			break;
			 		case 2:
			 			num1 = num1-num2;
			 			break;
			 		case 3:
			 			num1 = num1*num2;
			 			break;
			 		case 4:
			 			num1 = num1/num2;
			 			break;
			 	}
			 	var temp = num1.toString();
			 	// 限制结果的输出长度
			 	if (temp.length >= 12) {
			 		num1 = Number(num1);
			 		num1 = num1.toExponential(6);
			 	}
			 	$("#display_top").text(temp1+cont+temp2);
			 	$("#display_bottom").text(num1);
			 	round = 0;
			 	opera = 0;
			 	cont = null;
			 	num2 = 0;
			 	flag = 0;
			 }
			 // 判断是数字1还是数字2
			function number_option(element){
				if (opera == 0) {
					// num1
					num1 = number(num1, element);
					num1 = Number(num1);
					$("#display_bottom").text(num1);
				}
				else {
					// num2
					num2 = number(num2, element);
					num2 = Number(num2);
					// 标识表达式已满
					flag = 1;
					$("#display_bottom").text(num2);
				}
			}
			// 按键输入形成数字
			function number(num, element){
				var temp = num.toString();
				element = Number(element);
				if ( temp.length>=12) {
					return(num);
				}
				if (round == 0) {
					num = num*10+element;
				} 
				if (round != 0) {
					num = num + Math.pow(10, -round) * element;
					round++;
				}
				num = Number(num);
				return(num);
			}

			$(".num").click(function(){
				var element = $(this).text();
				number_option(element);
			});
			$(".opera").click(function(){
				round = 0;
				cont = $(this).text();
				if (flag == 1) {
					result();
				}
				opera = Number($(this).attr('type'));
				$("#display_top").text(num1 + cont);
			});
			$("#dot").click(function(){
				if (round == 0) {
					round = 1;
					var temp = $("#display_bottom").text();
					$("#display_bottom").text(temp+".")
				}
			});
		});


			
	</script>
	<div class="container">
		<!-- 显示区 -->
		<div class="display">
			<div id="display_top">
				<text></text>
			</div>
			<div id="display_bottom">
				<text>0</text>
			</div>
		</div>
		<!-- 按键区 -->
		<div class="key">
			<ul>
				<li>
					<button class="func" id="clear">AC</button>
					<button class="func" id="trans">&nbsp</button>
					<button class="func" id="percent">%</button>
					<button class="opera" type="4">÷</button>
				</li>
				<li>
					<button class="num" id="seven">7</button>
					<button class="num" id="eight">8</button>
					<button class="num" id="nine">9</button>
					<button class="opera" type="3">×</button>
				</li>
				<li>
					<button class="num" id="four">4</button>
					<button class="num" id="five">5</button>
					<button class="num" id="six">6</button>
					<button class="opera" type="2">-</button>
				</li>
				<li>
					<button class="num" id="one">1</button>
					<button class="num" id="two">2</button>
					<button class="num" id="three">3</button>
					<button class="opera" type="1">+</button>
				</li>
				<li>
					<button class="num" id="zero">0</button>
					<button id="dot">.</button>
					<button id="equal">=</button>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

写的时候也有参考别人的代码，用“”标签代替“”标签实现应该会更方便快捷。