简单计算器的编写

最新推荐文章于 2024-04-26 19:25:28 发布

牧野风凉

最新推荐文章于 2024-04-26 19:25:28 发布

阅读量549

点赞数

分类专栏： Web实例

本文链接：https://blog.csdn.net/weixin_45602982/article/details/100636065

版权

Web实例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.代码部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3-6</title>
		<style type="text/css">
			#div1{
				text-align: center;
				background-color: black;
				border-radius: 15px;
				width: 420px;
				height: 490px;
			}
			input[type =button]{
				border-radius: 5px;
				width: 90px;
				height: 50px;
				font-size: 30px;
			}
			#in1{
				width: 372px;
				height: 80px;
				margin-top: 40px;
				border-radius: 10px;
				font-size: 30px;
				text-align: right;
			}
		</style>
		<script>
			function calculate(m){
				var num = document.getElementById("in1");
				switch(m){
					case "=":
						num.value = eval(num.value);
						break;
					case "AC":
						num.value = "";
						break;
					case "+/-":
						num.value = (-(num.value));
						break;
					case "ESC":
						if(num.value.length > 0){
							num.value = num.value.substr(0,num.value.length-1);
						}
						break;
					case "%":
						num.value = num.value/100;
						break;
					default:
				  		num.value =num.value+ m;
						break;
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<p>
				<input type="text" id="in1"/><br/>
			</p>
			<p>
				<input type="button" value="AC" onclick="calculate(this.value)"/>
				<input type="button" value="ESC" onclick="calculate(this.value)"/>
				<input type="button" value="+/-" onclick="calculate(this.value)"/>
				<input type="button" value="/" onclick="calculate(this.value)"/>
			</p>
			<p>
				<input type="button" value="7" onclick="calculate(this.value)"/>
				<input type="button" value="8" onclick="calculate(this.value)"/>
				<input type="button" value="9" onclick="calculate(this.value)"/>
				<input type="button" value="*" onclick="calculate(this.value)"/>
			</p>
			<p>
				<input type="button" value="4" onclick="calculate(this.value)"/>
				<input type="button" value="5" onclick="calculate(this.value)"/>
				<input type="button" value="6" onclick="calculate(this.value)"/>
				<input type="button" value="-" onclick="calculate(this.value)"/>
			</p>
			<p>
				<input type="button" value="1" onclick="calculate(this.value)"/>
				<input type="button" value="2" onclick="calculate(this.value)"/>
				<input type="button" value="3" onclick="calculate(this.value)"/>
				<input type="button" value="+" onclick="calculate(this.value)"/>
			</p>
			<p>
				<input type="button" value="%" onclick="calculate(this.value)"/>
				<input type="button" value="0" onclick="calculate(this.value)"/>
				<input type="button" value="." onclick="calculate(this.value)"/>
				<input type="button" value="=" onclick="calculate(this.value)"/>
			</p>
		</div>
	</body>
</html>

2.效果图

在这里插入图片描述

牧野风凉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单计算器的编写

1.代码部分<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3-6</title> <style type="text/css"> #div1{ text-align: center; background...
复制链接

扫一扫