js+HTML+CSS实现计算器

最新推荐文章于 2023-09-29 00:38:43 发布

wenhuabuzhijian

最新推荐文章于 2023-09-29 00:38:43 发布

阅读量231

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/wenhuabuzhijian/article/details/120151144

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

html+css
js

html+css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#all {
				width: 400px;
				height: 650px;
				border: solid 1px black;
				margin: auto;
				border-radius: 10px;
			}
			
			#top {
				height: 120px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			#bottom {
				height: 530px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: flex-start;
			}
			
			#display {
				width: 370px;
				height: 75px;
				border: solid 1px black;
				border-radius:5px;
				font-size: 20px;
				text-align: right;
			}
			
			#btn{
				width: 75px;
				height: 75px;
				border: solid 1px black;
				margin: 10px;
				flex-shrink: 0;
				border-radius:5px;
				font-size: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div id="all">
			<div id="top">
				<input type="text" id="display">
			</div>
			<div id="bottom">
				<div id="btn" οnclick="backOne()">
					<-
				</div>
				<div id="btn" οnclick="clearAll()">
					C
				</div>
				<div id="btn">
					+/-
				</div>
				<div id="btn" value="+" οnclick="clickBtn('+')">
					+
				</div>
				
				
				<div id="btn" value="9" οnclick="clickBtn(9)">
					9
				</div>
				<div id="btn" value="8" οnclick="clickBtn(8)">
					8
				</div>
				<div id="btn" value="7" οnclick="clickBtn(7)">
					7
				</div>
				<div id="btn" value="-" οnclick="clickBtn('-')">
					-
				</div>
				
				
				<div id="btn" value="6" οnclick="clickBtn(6)">
					6
				</div>
				<div id="btn" value="5" οnclick="clickBtn(5)">
					5
				</div>
				<div id="btn" value="4" οnclick="clickBtn(4)">
					4
				</div>
				<div id="btn" value="*" οnclick="clickBtn('*')">
					x
				</div>
				
				
				<div id="btn" value="3" οnclick="clickBtn(3)">
					3
				</div>
				<div id="btn" value="2" οnclick="clickBtn(2)">
					2
				</div>
				<div id="btn" value="1" οnclick="clickBtn(1)">
					1
				</div>
				<div id="btn" value="/" οnclick="clickBtn('/')">
					÷
				</div>
				
				
				<div id="btn" value="0" οnclick="clickBtn(0)">
					0
				</div>
				<div id="btn" value="." οnclick="clickBtn('.')">
					.
				</div>
				<div id="btn">
					H
				</div>
				<div id="btn" οnclick="displayd()">
					=
				</div>
			</div>
		</div> 
	</body>
</html>

在这里插入图片描述

js

<script>
		var res = "";
		var displaydd = document.getElementById("display");
		function clickBtn(num){
			res = res + num;
			displaydd.value = res;
		}
		
		function displayd(){
			displaydd.value = eval(res);
			res = "";
		}
		
		function clearAll(){
			res = "";
			displaydd.value = res;
		}
		
		function backOne(){
			// alert(res);
			res = res.substring(0,res.length-1);
			// alert(res);
			displaydd.value = res;
		}
	</script>

wenhuabuzhijian

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js+HTML+CSS实现计算器

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录html+cssjshtml+css<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #all { width: 400px; height: 650px; bord
复制链接

扫一扫