JS实现简易网页计算器

最新推荐文章于 2023-09-18 09:54:05 发布

Ann_Chenyx

最新推荐文章于 2023-09-18 09:54:05 发布

阅读量2w

点赞数 24

分类专栏：前端文章标签： JS实现简易网页计算器 js JavaScript 计算器 js实现计算器

本文链接：https://blog.csdn.net/qq_40949537/article/details/81561223

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

js实现简易计算器。计算器的布局不像表格那么公正对称，所以布局这块相对比较繁琐，但是也可以通过这来练习一下CSS。

一、实现功能

完成计算器的加减乘除的基本计算功能
实现输入框中的字符串拼接

二、实现思路

完成基本布局
js实现运算功能

三、知识点

e.target||e.srcElement ：获取触发事件的元素

四、具体代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style type="text/css">
body {
	border: none;
}

h1{
	text-align: center;
}

button{
	cursor: pointer;
	width: 65px;
	height: 45px;
	background-color: hsla(182, 93%, 45%, 0);
	border-radius: 10px;
	box-shadow: 3px 3px 5px #ccc;
	outline: none;
	font-size: 25px;
}
input{
	font-size: 25px;
	border-radius: 10px;
	width: 200px;
	height: 40px;
}
#main{
	text-align:center;
	width:300px;
	height: 287px;
	margin: 0 auto;
	border:2px solid #ccc;
	background-image: url('../imges/4.jpg');
}
.num{
	margin: 10px;
}

</style>

</head>
<body>
	<h1>计算器</h1>
	<div id="main" onclick="cal(event);">
		<div class="num" >
			<input type="text" value="0" readonly="readonly" id="screen" />
			<button>C</button>
		</div>
		<div class="num">
			<button>7</button>
			<button>8</button>
			<button>9</button>
			<button>/</button>
		</div>
		<div class="num">
			<button>4</button>
			<button>5</button>
			<button>6</button>
			<button>*</button>
		</div>
		<div class="num">
			<button>1</button>
			<button>2</button>
			<button>3</button>
			<button>-</button>
		</div>
		<div class="num">
			<button>0</button>
			<button>.</button>
			<button>=</button>
			<button>+</button>
		</div>
	</div>
</body>
<script type="text/javascript">
function cal(e) {
	//获取触发事件的元素
	var obj = e.target||e.srcElement;
	if(obj.nodeName != "BUTTON"){
		return;
	}
	var v = obj.innerHTML;
	var screen = document.getElementById("screen");
	if(v == "C"){
		screen.value = 0;
	}else if(v == "="){
		//获取到输入框的值
		var exp = screen.value;
		try{
			var result = eval("("+exp+")");
			//将计算结果赋值给输入框
			screen.value = result;
		}catch(e){
			console.log(e);
			screen.value = "error";
		}
	}else{
		if(screen.value == 0){
			screen.value = "";
		}
		screen.value += v;
	}
	
}

</script>
</html>

五、js部分详解

function cal(e) {
	//获取触发事件的元素
	var obj = e.target||e.srcElement;
	if(obj.nodeName != "BUTTON"){
		return;
	}
	var v = obj.innerHTML;
	var screen = document.getElementById("screen");
	if(v == "C"){
		screen.value = 0;
	}else if(v == "="){
		//获取到输入框的值
		var exp = screen.value;
		try{
			var result = eval("("+exp+")");
			//将计算结果赋值给输入框
			screen.value = result;
		}catch(e){
			console.log(e);
			screen.value = "error";
		}
	}else{
		if(screen.value == 0){
			screen.value = "";
		}
		screen.value += v;
	}
	
}

利用e.target||e.srcElement，获取到触发事件的元素，||连接两个语法是为了解决不同浏览器的兼容性问题。

获取到触发事件元素的具体值之后，判断元素值是否等于“=”和“C”，这两个按钮是做区别于普通字符串拼接及计算的其他功能。

C做清屏处理：判断触发事件的按钮值是否为C，若为C，屏幕中只显示0；

=做计算处理：判断触发事件的按钮值是否为=，若为=，利用eval()方法计算屏幕上的公式；

其他触发事件的按钮直接做字符串拼接显示在屏幕上。

六、动图效果

今天的分享就到这里啦！欢迎指正！！！

Ann_Chenyx

关注

24
点赞
踩
146

收藏

觉得还不错? 一键收藏
7
评论
JS实现简易网页计算器

js实现简易计算器。计算器的布局不像表格那么公正对称，所以布局这块相对比较繁琐，但是也可以通过这来练习一下CSS。一、实现功能完成计算器的加减乘除的基本计算功能实现输入框中的字符串拼接二、实现思路完成基本布局 js实现运算功能三、知识点e.target||e.srcElement ：获取触发事件的元素四、具体代码实现&lt;!DOCTYPE html&gt;&...
复制链接

扫一扫