JS实现苹果计算器

最新推荐文章于 2023-03-03 12:15:21 发布

ITDaBao

最新推荐文章于 2023-03-03 12:15:21 发布

阅读量437

点赞数 1

分类专栏： WEB前端文章标签： js 字符串

本文链接：https://blog.csdn.net/weixin_45177027/article/details/115481766

版权

WEB前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用HTML、CSS和JavaScript创建一个简单的计算器网页。网页设计包括开机键、音量键、手机顶部（含麦克风和摄像头）、屏幕及数字键盘。JavaScript实现了数字输入、运算符选择、计算结果展示、清除和删除上一个数字的功能，使得用户能够进行基本的数学计算。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>手机</title>
		<style type="text/css">
			#phone{
				position: relative;
				width: 380px;
				height: 700px;
				box-shadow: 1px 1px 10px #808080;
				margin: auto;
				border-radius: 30px;
			}
			
			.kj{
				position: absolute;
				width: 8px;
				height: 60px;
				background-color: black;
				right: -8px ;
				top:100px;
			}
			.yl{
				position: absolute;
				width: 8px;
				height: 80px;
				background-color: black;
				left: -8px;
				top: 85px;
			}
			
			.top{
				width: 120px;
				height: 50px;
				/* box-shadow: 1px 1px 10px #808080; */
				margin: auto;
			}
			
			.mkf{
				float: left;
				width: 100px;
				height: 10px;
				border-radius: 5px;
				background-color: black;
				margin-right: 10px;
				margin-top: 20px;
			}
			.sxj{
				float: left;
				width: 10px;
				height: 10px;
				border-radius: 5px;
				background-color: black;
				margin-top: 20px;
			}
			
			.screen{
				width: 370px ;
				height: 600px;
				background-color: black;
				margin: auto;
			}
			.result-num{
				height: 120px;
				/* padding-top: 30px; */
			}
			.sp{
				float: right;
				color: white;
				font-size: 50px;
				margin-top: 50px;
			}
			
			.num{
				height: 480px;
			}
			
			.key{
				width: 82.5px;
				height: 82.5px;
				border-radius: 50px;
				background-color: #808080;
				float: left;
				margin: 5px;
				
				
				text-align: center;
				line-height: 80px;
				font-size: 20px;
				color: white;
			}
			.first{
				background-color: #B0B0B0;
				color: black;
			}
			.second{
				background-color: orange;
			}
			
			.third{
				width: 175px;
			}
			
			
			
			
			.home{
				width: 45px;
				height: 45px;
				border-radius: 25px;
				background-color: #B0B0B0;
				margin: 3px auto 0px auto;
				
			}
		</style>
	</head>
	<body>
		<div id="phone">
			<!--开机键-->
			<div class="kj"></div>
			<!--音量-->
			<div class="yl"></div>
			<!-- 手机顶部 -->
			<div class="top">
				<!-- 麦克风 -->
				<div class="mkf"></div>
				<!-- 摄像头 -->
				<div class="sxj"></div>
			</div>
			<!-- 屏幕 -->
			<div class="screen">
				<div class="result-num">
					<span class="sp">0</span>
				</div>
				
				<div class="num">
					<div class="key first" onclick="clearCompute()">AC</div>
					<div class="key first" onclick="deleteLastNum()">←</div>
					<div class="key first">%</div>
					<div class="key second" onclick="fun('/')">/</div>
					<div class="key keynum" onclick="fun(7)">7</div>
					<div class="key keynum" onclick="fun(8)">8</div>
					<div class="key keynum" onclick="fun(9)">9</div>
					<div class="key second" onclick="fun('*')">*</div>
					<div class="key keynum" onclick="fun(4)">4</div>
					<div class="key keynum" onclick="fun(5)">5</div>
					<div class="key keynum" onclick="fun(6)">6</div>
					<div class="key second" onclick="fun('-')">-</div>
					<div class="key keynum" onclick="fun(1)">1</div>
					<div class="key keynum" onclick="fun(2)">2</div>
					<div class="key keynum" onclick="fun(3)">3</div>
					<div class="key second" onclick="fun('+')">+</div>
					<div class="key third keynum" onclick="fun(0)">0</div>
					<div class="key" onclick="fun('.')">.</div>
					<div class="key second" onclick="compute()">=</div>
				</div>
			</div>
			<!-- home键 -->
			<div class="home">
				
			</div>
		</div>
		<script type="text/javascript">
			var span = document.querySelector(".sp");
			/**
			 * @param {Object} num
			 * 点击数字键盘   将数字替换到我们的span标签内部
			 */
			function fun(num){
				var value = span.innerText;
				if(value == 0){
					span.innerText = num;
				}else{
					span.innerText = span.innerText.concat(num);
				}
			}
			/**
			 * 计算结果的
			 */
			function compute(){
				var value = span.innerText;
				var result= eval(value);
				span.innerText = result;
			}
			/**
			 * 清空计算区域  重置为0
			 */
			function clearCompute(){
				span.innerText="0";
			}
			/**
			 * 删除计算区域的最后一个字符
			 */
			function deleteLastNum(){
				var value = span.innerText;
				console.log(typeof(value))
				if(value == 0){				
				}
				else{
					/**
					 * value是一个字符串
					 * zs123
					 * 字节：文本在计算器底层存储的时候都是字节存储的 编码集  将字符转成特定的字节在计算机上存储的
					 * 字符：人类能看懂的一个字母 或者一个中文汉字
					 *    a  b  中   国      aj
					 * 
					 * 字符串就是一个一个字符组成的一个集合体  字符串String提供了很多常用的方法  以便我们对这个字符数组进行相关操作
					 */
					if(value.length!=1){
					span.innerText = value.substring(0,value.length-1)
					}else{
						span.innerText="0";
					}
					
				}
			}
		</script>
	</body>
</html>