计算器（HTML＋CSS＋JS）

最新推荐文章于 2022-06-02 19:35:39 发布

南疆晚歌

最新推荐文章于 2022-06-02 19:35:39 发布

阅读量362

点赞数

分类专栏：自己动手文章标签： html css js

本文链接：https://blog.csdn.net/qq_45629699/article/details/112337362

版权

自己动手专栏收录该内容

1 篇文章 0 订阅

订阅专栏

计算器（HTML＋CSS＋JS）

功能介绍：

整数与小数的加减乘除运算
展示历史记录，当历史记录多余30条时，删除前十条

效果图：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
		<style>

			* {
		 margin: 0;
		 padding: 0;
		 }
		 #main{
			 width: 600px;
			 height: 410px;
			 display: flex;
			 margin-left: 400px;
		 }
		 
		 #titel{
			 text-align: center;
			 font-size: 20px;
			font-family: "宋体";
			 color: #222222;
			 margin-left: 180px;
			 margin-top: 5px;
		 }
		 
		 #panel {
		 width: 400px;
		 height: 410px;
		 margin: 30px auto;
		 border: 3px solid #ccc;
		 flex: 4;
		 }
		 #history{
			 width: 100px;
			 height: 410px;
			 margin: 30px auto;
			 border: 3px solid #ccc;
			 flex: 2;
		 }

		 #screen {
		 width: 266px;
		 height: 60px;
		 margin: 5px;
		 display: inline-block;
		 border: 1px solid #ddd;
		 margin-left:10px;
		 line-height: 40px;
		 padding-left: 3px;
		 padding-right: 3px;
		 text-align: right;
		 }
		 
		 input[type="button"] {
		 width: 80px;
		 height: 60px;
		 border: 1px solid #ddd;
		 margin: 5px;
		 font-family: "微软雅黑";
		 font-size: 18px;
		 font-weight: bold;
		 }
		 
		 #buttons{
			 margin-left: 20px;
			 margin-top: 10px;
		 }
		 
		 #mian{
			 margin-top: 10px;
		 }
		 
		 #panel div, p, input {
		 float: left;
		 }
		 
		 #text{
			 text-align: center;
			 font-size: 13sp;
			 margin-top: 5px;
			 border-bottom:  3px solid #ccc;
		 }
		 #ptext{
		 	 width: 200px;
		 	 height: 335px;	
			  font-size: 20sp;
			  font-family: "bodoni mt";
			  font-weight: bold;
			  text-align: center;
			  float: unset;
		 }
		 #ptext p {
			 float: unset;
		 }

		 
		 #button2{
			 width: 200px;
			 height: 40px;
			 margin-left: unset;
			 border-top: 3px solid #ccc;
		 }
	
		</style>
		<script>
		
			window.onload = function(){
				 var flag = "0";
				 var strings = "";
				 var P=[];
				 var historyScreen = document.getElementById("ptext");
				  //获取计算器面板
				  var panel = document.getElementById("panel");
				  //为计算面板动态添加单击事件
				  panel.onclick = function(e) {
					   //参数e用来接收event对象
					   //获取所有input元素
					   var inputs = e.toElement;
					   //获取P元素
					   var screen = document.getElementById("screen");
					  
					   if(inputs.type == "button") {
						  
						//如果获取到的是input元素，则开始执行运算逻辑
							if (inputs.value == "clear") {
									screen.innerHTML = "";
									strings = "";
							} else if (inputs.value == "=") {
								 flag = "1";
								 var p = document.createElement('p');
								 
									 try {
										 strings="";
										 strings += screen.innerHTML;
										 screen.innerHTML = eval(screen.innerHTML);
										 p.innerHTML = strings+"="+screen.innerHTML
										 P.push(p);
										 
										 historyScreen.appendChild(p);
									 } catch (ex) {
										 screen.innerHTML = "Error";
									 }
								
							} else {
							
								if(flag=="1" && (inputs.value=="0"||inputs.value=="1"||inputs.value=="2"||inputs.value=="3"||inputs.value=="4"
								||inputs.value=="5"||inputs.value=="6"||inputs.value=="7"||inputs.value=="8"||inputs.value=="9")){
									screen.innerHTML = "";
									strings = "";
								}
								flag = "0";
									screen.innerHTML += inputs.value;
									
							}
					   } else {
								//如果单击的地方不是input元素，则程序不回应
								return;
							}
				   
				   if(P.length>30){
						for (var i = 0; i < 10; i++) {
							historyScreen.removeChild(P[i]);
						}
				   }
				   
					}
				Clear = function (){
					for (var i = 0; i < P.length; i++) {
						historyScreen.removeChild(P[i]);
					}
				}
			}
		
		</script>
	</head>
	<body>
		<div id="main">
			<div id="panel">
				<div id="titel">
					<p>计算器</p>
				</div>
				<div id="mian">
					<div>
						<p id="screen"></p>
						<input type="button" value="clear" />
					</div>
					<div id="buttons">
						<input type="button" value="7" />
						<input type="button" value="8" />
						<input type="button" value="9" />
						<input type="button" value="/" />
						<input type="button" value="4" />
						<input type="button" value="5" />
						<input type="button" value="6" />
						<input type="button" value="*" />
						<input type="button" value="1" />
						<input type="button" value="2" />
						<input type="button" value="3" />
						<input type="button" value="+" />
						<input type="button" value="." />
						<input type="button" value="0" />
						<input type="button" value="-" />
						<input type="button" value="=" />
					</div>
				</div>
			</div>
			<div id="history">
				<div id="text">历史记录</div>
				<div id="ptext" style="overflow-y: scroll;"></div>
				<input type="button" id="button2" value="Clear" onclick="Clear()">
			</div>
		</div>

	</body>
</html>