Web前端制作仿iOS计算器案例

原创已于 2024-07-01 00:36:12 修改 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #ui设计 #javascript #css3 #html #html5 #css

于 2024-06-30 21:31:39 首次发布

Web 专栏收录该内容

1 篇文章

订阅专栏

时隔2年，再次发文章，哈哈，现在已经从初三一跃成中职二年级的学生了，之前python学习的过程可谓是一波三折，从这个学期开始接触到前端，上手很快，因下半年我要参加一个移动应用开发的省技能大赛项目，所以打算在这个暑假再深入一下前端，今天做了个仿iOS计算器的例子，目前它可以实现加、减、乘、除运算，清除，退位，单击复制等功能，话不多说，直接看成果和代码咯～

非常简单的一个例子，里面肯定有一些不足，小伙伴们可以在评论区里提提意见～

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			*{
				font-family: system-ui;
			}
			
			.calculator{
				width: 400px;
				border: 1px solid black;
				border-radius: 50px;
				background-color: #000000;
			}
			.calculator-result{
				font-size: 24px;
				color: white;
				text-align: right;
				padding-right: 30px;
				border-bottom: 1px solid black;
				height: 70px;
				line-height: 55px;
			}
			
			.calculator-button{
				user-select: none; 
				padding: 20px;
				padding-bottom: 5px;
			}
			
			table,tr{
				display: flex;
				font-size: 35px;
			}
			
			th{
				width: 82px;
				height: 82px;
				line-height: 82px;
				border-radius: 800px;
				margin-right: 8px;
				margin-bottom: 15px;
				background-color: #1f1e20;
				color: white;
			}
			
			.signal{
				background-color: #fc8e10;
			}
			
			th:hover{
				cursor: pointer;
			}
			
		</style>
	</head>

	<body>
		<div class="calculator">
			<div onclick="copy()" class="calculator-result">
				<h1 id="result"></h1>
			</div>
			<div class="calculator-button">
				<table>
					<tr>
						<th onclick="clean()">AC</th>
						<th onclick="back()">←</th>
					</tr>
					<tr>
						<th onclick="add(1)">1</th>
						<th onclick="add(2)">2</th>
						<th onclick="add(3)">3</th>
						<th class="signal" onclick="add('+')">+</th>
					</tr>
					<tr>
						<th onclick="add(4)">4</th>
						<th onclick="add(5)">5</th>
						<th onclick="add(6)">6</th>
						<th class="signal" onclick="add('-')">-</th>
					</tr>
					<tr>
						<th onclick="add(7)">7</th>
						<th onclick="add(8)">8</th>
						<th onclick="add(9)">9</th>
						<th class="signal" onclick="add('*')">×</th>
					</tr>
					<tr>
						<th onclick="add(0)">0</th>
						<th onclick="add('.')">.</th>
						<th class="signal" onclick="math()">=</th>
						<th class="signal" onclick="add('/')">÷</th>
					</tr>
				</table>
			</div>
		</div>
		
		<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
		<script>
			
			display = document.getElementById("result") /// 定义全局变量 display 为获取 result 处的文字（获取显示内容）
			
			function add(inputs){ /// 定义添加字符函数
				if ((inputs === '.') && (display.innerText === '')){ /// 判断输入"."的同时，显示处是不是空的
					return 0 /// 若是，不执行任何操作
				} else{
					display.innerText += inputs /// 若不是，就把输入的内容添加到结果显示处
				}
			}
			
			function math(){ /// 定义计算函数
				if (!(display.innerText === null)){ /// 判断显示处是否有内容
					display.innerText = eval(display.innerText) /// 若有，则将字符串执行算数
				} else{
					return 0 /// 若没有，不执行任何操作，一定要有该行，不然会显示undefined
				}
			}
			
			function clean(){ /// 定义清除函数
				display.innerText = null /// 将结果处变更为空
			}
			
			function back(){ /// 定义删除函数
				if (!(display.innerText === null)){ /// 判断显示处是否有内容
					display.innerText = display.innerText.substr(0, display.innerText.length - 1) /// 若有，则将字符串最后一位删掉
				} else{
					return 0 /// 若没有，不执行任何操作
				}
			}
			
			function copy(){ /// 定义复制函数
				if (!(display.innerText === null)){ /// 判断显示处是否有内容
					navigator.clipboard.writeText(display.innerText) /// 若有，则复制内容到剪切板
					alert("已复制") /// 提示用户
				} else{
					return 0 /// 若没有，不执行任何操作
				}
				
			}
			
		</script>
	</body>
</html>