javascript实现计算器

anansec

已于 2022-05-06 16:12:37 修改

阅读量9.3k

点赞数 24

分类专栏： # 前端系列文章标签： javascript js javascript实现计算器计算器布局

于 2020-01-05 13:34:18 首次发布

anansec

本文链接：https://blog.csdn.net/weixin_42380348/article/details/103842269

版权

前端系列专栏收录该内容

10 篇文章 1 订阅

订阅专栏

首先说明一下为什么发这篇文章，因为今天早晨看到一篇类似的文章，我看了他的源码，发现实在太啰嗦了，于是便准备把这篇文章发出来！
其实使用javascript的函数来实现计算器可以说是练习javascript的一个好方法，虽然我的代码可以使用eval函数进行简化，但是我觉得没有必要。如果我的文章对你有用就点个赞吧！
先看下布局
在这里插入图片描述
源码放在这里

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
		<style>
		.wrapper{
			width: 400px;
			border: 1px solid gray;
			box-sizing: border-box;
		}
		#content{
			width: 400px;
			height: 150px;
			border: 1px solid gray;
			box-sizing: border-box;
			text-align: right;
			line-height: 150px;
			font-size: 30px;
		}
		.box{
			width: 400px;
		}
		.div1{
			width: 100px;
			height: 100px;
			border: 1px solid gray;
			box-sizing: border-box;
			float: left;
			font-size: 25px;
			text-align: center;
			line-height: 100px;

		}
		.div1:hover{
			box-shadow: 2px 2px 2px gray;
		}
		.div1:active{
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div id="content"></div>
		<div class="box">
			<div class="div1" id="1" onclick="getNum(this)">1</div>
			<div class="div1" id="2" onclick="getNum(this)">2</div>
			<div class="div1" id="3" onclick="getNum(this)">3</div>
			<div class="div1" id="+" onclick="getOperator(this)">+</div>
		</div>
		<div class="box">
			<div class="div1" id="4" onclick="getNum(this)">4</div>
			<div class="div1" id="5" onclick="getNum(this)">5</div>
			<div class="div1" id="6" onclick="getNum(this)">6</div>
			<div class="div1" id="-" onclick="getOperator(this)">-</div>
		</div>
		<div class="box">
			<div class="div1" id="7" onclick="getNum(this)">7</div>
			<div class="div1" id="8" onclick="getNum(this)">8</div>
			<div class="div1" id="9" onclick="getNum(this)">9</div>
			<div class="div1" id="*" onclick="getOperator(this)">*</div>
		</div>
		<div class="box">
			<div class="div1" id="0" onclick="getNum(this)">0</div>
			<div class="div1" id="C" onclick="clearClick(this)">C</div>
			<div class="div1" id="=" onclick="opert(this)">=</div>
			<div class="div1" id="/" onclick="getOperator(this)">/</div>
		</div>
	</div>
	<script>
		var 数字1 = 0;
		var 按钮标识 = 0;
		var 运算符 = '+';
		var content = document.getElementById('content');
		function getNum(btn){
			if(按钮标识== 0){
				content.innerText += btn.innerText;
			}else{
				content.innerText = btn.innerText;
			}
			按钮标识 = 0;
		}
		function getOperator(btn){
			数字1 = content.innerText;
			运算符 = btn.innerText;
			按钮标识 = 1;
		}
		function opert(btn){
			var result = 0;
			switch(运算符){
				case '+':
					result = parseInt(数字1) + parseInt(content.innerText);
					break;
				case '-':
					result = parseInt(数字1) - parseInt(content.innerText);
					break;

				case '*':
					result = parseInt(数字1) * parseInt(content.innerText);
					break;

				case '/':
					result = parseInt(数字1) / parseInt(content.innerText);
					break;

			}
			content.innerText = result;
		}
		function clearClick(btn){
			content.innerText = '';
			数字1 = 0;
			按钮标识 = 0;
			运算符 = '+';
		}
	</script>
</body>
</html>

anansec

关注

24
点赞
踩
131

收藏

觉得还不错? 一键收藏
打赏
4
评论
javascript实现计算器

       首先说明一下为什么发这篇文章，因为今天早晨看到一篇类似的文章，我看了他的源码，发现实在太啰嗦了，于是便准备把这篇文章发出来！       其实使用javascript的函数来实现计算器可以说是练习javascript的一个好方法，虽然我的代码可...
复制链接

扫一扫