javascript学习-实现计算器

最新推荐文章于 2024-08-21 14:09:37 发布

inesim

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量190

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/innesim/article/details/126830451

版权

HTML CSS JavaScript 计算器前端开发

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最终效果
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>calculator</title>

<style type="text/css">
body {
	border: none;
}
 
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('a.jpg');
}
.num{
	margin: 10px;
}
 
</style>


</head>
<body>
	
	<div id="main" onclick="cal(event);">
		<div class="row1" >			
			<input type="text" value="0" readonly="readonly" id="screen" />			
			<button>back</button>
		</div>
		<div class="row2" >			
			<button>C</button>
			<button>%</button>
			<button>(</button>
			<button>)</button>
		</div>
		<div class="row3">
			<button>7</button>
			<button>8</button>
			<button>9</button>
			<button>/</button>
		</div>
		<div class="row4">
			<button>4</button>
			<button>5</button>
			<button>6</button>
			<button>*</button>
		</div>
		<div class="row5">
			<button>1</button>
			<button>2</button>
			<button>3</button>
			<button>-</button>
		</div>
		<div class="row6">
			<button>0</button>
			<button>.</button>
			<button>=</button>
			<button>+</button>
		</div>
	</div>
</body>
<script type="text/javascript">
//获取当前输入框的值并做相关运算。
function cal(e) {
	//e.target||e.srcElement 获取触发事件元素的值
	var obj = e.target||e.srcElement;
	if(obj.nodeName != "BUTTON"){
		return;
	}
	var key = obj.innerHTML;
	var screen = document.getElementById("screen");
	if(key == "C"){
		screen.value = 0;
	}else if(key == "="){
		//获取输入框的值
		var exp = screen.value;
		try{
			var result = eval("("+exp+")");
			//结果显示在输入框
			screen.value = result;
		}catch(e){
			console.log(e);
			screen.value = "error";
		}
	}else if(key == "back")
	{
		//获取输入框的值
	   var exp = screen.value;
	   //输入框的值从末尾删除1字符
	   var str = exp.substring(0,exp.length - 1);	   
       screen.value = str;
	}
	else{
		if(screen.value == 0){
			screen.value = "";
		}
		screen.value += key;
	}
	
}
 
</script>
</html>