用最简单快捷的方法用js写一个计算器

最新推荐文章于 2024-01-23 16:40:43 发布

蒲小若

最新推荐文章于 2024-01-23 16:40:43 发布

阅读量680

点赞数 1

本文链接：https://blog.csdn.net/qq_39585562/article/details/77104390

版权

在js的全局方法中有一个eval()方法，由于平时不怎么用，所以到关键时候就没想起来它

想写一个简易的计算器，本来以为要不了多久就能写出来的，谁知道愣是花费了我近两个小时的时间来写，但结果还是不能令我满意。想找一个更好的方法来写，不想写的那么麻烦，用什么方法呢？想了一个遍，后来猛然看到屏幕上有一个eval(),当时我的电脑正打开着网页。福星来了，对啊，我浪费了这么长时间写出来的东西还不能令我满意，一个eval()不就搞定了么，下面就给大家看一下我写的代码，写的很粗糙，还请大家多多指正。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 400px;
				height: 450px;
				margin: 0 auto;
				background: pink;
			}
			.show{
				width:100%;
				height: 100px;
				line-height: 100px;
				text-align: right;
				background: #FFFFFF;
				border:1px solid #000;
			}
			.operate{
				width: 100%;
				height: 250px;
				margin-top: 50px;
			}
			p{
				margin-top: 20px;
				text-align: center;
			}
			input{
				width: 80px;
				height: 40px;
				/*margin-left: 50px;*/
				text-align: center;
			}
			input:nth-child(5n),input:first-child{
				margin-left: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="show" id="show"></div>
			<div class="operate">
				<p>
					<input type="button" name="one" id="one" value="1" οnclick="num(1)"/>
					<input type="button" name="two" id="two" value="2" οnclick="num(2)"/>
					<input type="button" name="three" id="three" value="3" οnclick="num(3)"/>
					<input type="button" name="plus" id="plus" value="+" οnclick="num('+')"/>
				</p>
				<p>
					<input type="button" name="four" id="four" value="4" οnclick="num(4)"/>
					<input type="button" name="five" id="five" value="5" οnclick="num(5)"/>
					<input type="button" name="six" id="six" value="6" οnclick="num(6)"/>
					<input type="button" name="reduce" id="reduce" value="-" οnclick="num('-')"/>
				</p>
				<p>
					<input type="button" name="seven" id="seven" value="7" οnclick="num(7)"/>
					<input type="button" name="eight" id="eight" value="8" οnclick="num(8)"/>
					<input type="button" name="nine" id="nine" value="9" οnclick="num(9)"/>
					<input type="button" name="times" id="times" value="x" οnclick="num('*')"/>
				</p>
				<p>
					<input type="button" name="divide" id="divide" value="/" οnclick="num(/)"/>
					<input type="button" name="zero" id="zero" value="0" οnclick="num(0)"/>
					<input type="button" name="equal" id="equal" value="=" οnclick="equal()"/>
					<input type="button" name="mod" id="mod" value="%" οnclick="num('%')"/>
				</p>
			</div>	
					
		</div>
	</body>
	<script type="text/javascript">
		function num(figure){
//			var figure = figure.toString();
			var show = document.getElementById("show");
			showNum = show.innerHTML+figure;
			show.innerHTML = showNum;
		}
		function equal(){
			document.getElementById("show").innerHTML = eval(document.getElementById("show").innerHTML);
			/*var lal = document.getElementById("show").innerHTML;
			alert(lal);*/
		}
	</script>
</html>