原生js实现计算器

最新推荐文章于 2024-06-03 19:32:11 发布

luo15256533579

最新推荐文章于 2024-06-03 19:32:11 发布

阅读量8.2k

点赞数 3

分类专栏：原生js实现计算器文章标签：原生js实现计算器

本文链接：https://blog.csdn.net/luo15256533579/article/details/78136071

版权

原生js实现计算器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图

逻辑

1、获取被点击的按钮的值。

2、判断这个是数字、运算符号、小数点。

3、运算符号进行运算，小数点和数字push进数组，然后转换为数字。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.wrap{
		width: 250px;
		height: 250px;
		margin: 100px auto;
		background-color: #A8A8A8;
		border:10px solid #A8A8A8;
		border-radius: 5px;
		box-shadow: 1px 1px 1px #A8A8A8;
	}
	.result{
		width: 250px;
		height: 50px;
		text-align: center;
		line-height: 50px;
		background: #EEE685;
		border-radius:5px 5px 0 0;
		box-shadow: 1px 1px 1px #A8A8A8;
		box-shadow: -0.5px -0.5px 0.5px 0.3px #FFF5EE inset;
	}
	.box{
		width: 250px;
		height: 200px;
		background: #969696;
		position: relative;
		cursor: pointer;
		border-radius: 0 0 5px 5px;
		box-shadow: -0.5px -0.5px 0.5px 0.3px #FFF5EE inset;
	}
	.button{
		width: 40px;
		height: 40px;
		margin: 5px;
		background: white;
		float: left;
		border-radius: 10px;
		text-align: center;
		line-height: 40px;
		font-size: 20px;
	}
	.big{
		width: 90px;
		height: 40px;
	}
	.spe{
		width: 40px;
		height: 90px;
	}
	.position{
		position: relative;
		left: 50px;
		background-color: orange;
	}
	.spe2{
		position:relative;
		top: -50px;
		line-height: 90px;
	}
	.orange{
		background-color: orange;
	}
	.button:hover{
		background-color: rgba(0,0,0,0.6);
	}
	</style>
</head>
	<div class="wrap">
		<div class="result"></div>
		<div class="box">
			<div class="button big" >c</div>
			<div class="button">1</div>
			<div class="button">2</div>
			<div class="button orange">+</div>
			<div class="button">3</div>
			<div class="button">4</div>
			<div class="button">5</div>
			<div class="button">6</div>
			<div class="button orange">-</div>
			<div class="button">7</div>
			<div class="button">8</div>
			<div class="button">9</div>
			<div class="button position">×</div>
			<div class="button big">0</div>
			<div class="button">.</div>
			<div class="button spe spe2">=</div>
			<div class="button orange">÷</div>
		</div>
	</div>
<body>
<script type="text/javascript">
	var num1=0;
	var num2='+';
	var num3=0;
	var x=null;
	var arr=[];
	var con=document.getElementsByClassName('result')[0];
	for(var i=0;i<17;i++){
		var but=document.getElementsByClassName('button')[i];
		but.οnclick=function(){
			x=this.innerHTML;
			main();
		}
	}
	function main(){
		if(!isNaN(x) || x==='.'){
			arr.push(x);
			con.innerHTML=arr.join('');
		}else if(x==='c'){
			num1=0;
			num2='+';
			num3=0;
			x=null;
			arr=[];
			con.innerHTML=num1;
		}else{
			num3=parseFloat(arr.join(''));
			count();
			con.innerHTML=num1;
			arr=[];
			num2=x;
		}
	}
	function count(){
		if(num2==='+'){
			num1+=num3;
		}
		if(num2==='-'){
			num1-=num3;
		}
		if(num2==='×'){
			num1*=num3;
		}
		if(num2==='÷'){
			num1/=num3;
		}
	}
</script>
</body>
</html>

luo15256533579

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
原生js实现计算器

逻辑1、获取被点击的按钮的值。2、判断这个是数字、运算符号、小数点。3、运算符号进行运算，小数点和数字push进数组，然后转换为数字。 Document *{ margin: 0; padding: 0; } .wrap{ width: 250px; height: 250px; margin: 100px auto; backgroun
复制链接

扫一扫