不完善的计算器 = -=-优快云博客

本文链接：https://blog.youkuaiyun.com/cyang233/article/details/103827524

本文介绍了一个使用HTML、CSS和JavaScript实现的简易网页计算器。该计算器具备基本的数学运算功能，包括加、减、乘、除以及清除和删除上一操作的功能。通过简单的用户界面设计，使得用户可以直观地进行计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
		<style>
			.fa{
				cursor: pointer;
				display: flex;
				width: 400px;
				justify-content: space-between;
				flex-wrap: wrap;
				align-content: space-around;
			}
			.fa li{
				width: 25%;
				list-style: none;
				font-size: 20px;
				text-align: center;
				padding-top:20px;
			}
			.fa li:nth-child(1){
				width: 100%;
			}
			.fa li input{
				width:83%;
			}
		</style>
	</head>
	<body>
		<ul class="fa">
			<li><input type="text" disabled="disabled" id="sc"></li>
			<li onclick="cl()">AC</li>
			<li onclick="shan()">←</li>
			<li onclick="ad('%')">%</li>
			<li onclick="ad('/')">÷</li>
			<li onclick="ad(7)">7</li>
			<li onclick="ad(8)">8</li>
			<li onclick="ad(9)">9</li>
			<li onclick="ad('*')">x</li>
			<li onclick="ad(4)">4</li>
			<li onclick="ad(5)">5</li>
			<li onclick="ad(6)">6</li>
			<li onclick="ad('-')">-</li>
			<li onclick="ad(1)">1</li>
			<li onclick="ad(2)">2</li>
			<li onclick="ad(3)">3</li>
			<li onclick="ad('+')">+</li>
			<li>¤</li>
			<li onclick="ad(0)">0</li>
			<li onclick="ad('.')">.</li>
			<li onclick="deng()">=</li>
		</ul>
		<script>
			function ad(a){
				var b = document.getElementById("sc");
				b.value = b.value+a;
			}
			function shan(){
				var a = document.getElementById("sc");
				b = a.value.substr(0,a.value.length-1);
				a.value = b;	
			}
			function cl(){
				var a = document.getElementById("sc");
				a.value = "";
			}
		function deng(){
			var a = document.getElementById("sc");
			var b = eval(a.value);
			a.value = b;
		}
		</script>
		
	</body>
</html>