(36行代码)javascript实现简单的计算器

最新推荐文章于 2023-07-26 23:03:15 发布

赵同学‍

最新推荐文章于 2023-07-26 23:03:15 发布

阅读量276

点赞数

文章标签： javascriptcore javascript

赵鑫阳

本文链接：https://blog.csdn.net/weixin_45948874/article/details/112463176

版权

话不多说我们上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			input[type='button']{width: 50px;height: 50px;}
			//设置输入框的宽高都为50px
			.mydiv{width: 215px;height: 250px;border: 1px solid black;margin: 0 auto;}
			//设置计算器的边框的大小和居中对齐
		</style>
		<script>
			function setVal(myval){str =  document.getElementById("mytext1").value+=myval;}
			//此函数是累加输入框的内容到str 
			function cale(){ document.getElementById("mytext1").value = eval(str);}
			//计算器计算的主要功能通过elval函数来实现的
			//eval函数的主要功能就是字符串的的数值计算
			function zro(){document.getElementById("mytext1").value ="";}
			//此功能是清空输入框的内容实现归0
		</script>
	</head>
	<body>
		<div class="mydiv">
			<input id="mytext1" style="width: 210px; height: 40px;"  type="text" /><br />
			<input  type="button" value="7" onclick="setVal('7')"/>
			<input type="button" value="8" onclick="setVal('8')"/>
			<input type="button" value="9" onclick="setVal('9')"/>
			<input  type="button" value="+" onclick="setVal('+')"/>
			<input type="button" value="4" onclick="setVal('4')"/>
			<input type="button" value="5" onclick="setVal('5')"/>
			<input  type="button" value="6" onclick="setVal('6')"/>
			<input type="button" value="-" onclick="setVal('-')"/>
			<input type="button" value="1" onclick="setVal('1')"/>
			<input  type="button" value="2" onclick="setVal('2')"/>
			<input type="button" value="3" onclick="setVal('3')"/>
			<input type="button" value="*" onclick="setVal('*')"/>
			<input type="button"  value="0" onclick="setVal('0')"/>
			<input type="button"  value="归零" onclick="zro()"/>
			<input  type="button" value="=" onclick="cale()"/>
			<input type="button" value="/" onclick="setVal('/')"/>	
		</div>
	</body>
</html>