原生JS简易计算器

图片演示:

代码演示:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>简单计算器 - NiceHan</title>
		<style type="text/css">
			* {
				border: 0;
			}

			body {
				background-color: rgba(100, 149, 237, 0.8);
			}

			h1 {
				color: white;
				text-align: center;
				font-family: "Microsoft YaHei";
				font-size: 56px;
				font-weight: 700;
				text-shadow: 0px 0px 0 rgb(148, 148, 148), 1px 1px 0 rgb(125, 125, 125), 2px 2px 0 rgb(103, 103, 103), 3px 3px 0 rgb(80, 80, 80), 4px 4px 0 rgb(57, 57, 57), 5px 5px 0 rgb(34, 34, 34), 6px 6px 0 rgb(11, 11, 11), 7px 7px 6px rgba(0, 0, 0, 0.75), 7px 7px 1px rgba(0, 0, 0, 0.5), 0px 0px 6px rgba(0, 0, 0, 0.2);
			}

			input {
				margin: 6px;
				background-color: white;
			}

			.btnstyle {
				background-color: orange;
			}

			input:hover {
				background-color: #c0c0c0;
			}

			input[type="button"] {
				height: 36px;
				width: 36px;
			}

			input[type="text"] {
				height: 36px;
				width: 190px;
			}
		</style>

		<script type="text/javascript">
			function num(val) {
				switch (val) {
					case "=":
						document.getElementById("texton").value = eval(document.getElementById("texton").value);
						break;

					case "AC":
						document.getElementById("texton").value = "";
						break;

					default:
						document.getElementById("texton").value = document.getElementById("texton").value + val;
						document.getElementById("texton").value = document.getElementById("texton").value;
				}
			}
		</script>
	</head>

	<body>
		<h1>简单计算器 - NiceHan</h1>

		<div style="width: 208px;margin: auto;background-color: black;">
			<input type="text" name="texton" id="texton" value="" style="text-align: center;font-size: 16px;background-color: lightyellow;" />
			<br />
			<input type="button" name="btn1" id="btnac" value="AC" onclick="num(this.value)" style="width: 141px;" />
			<input type="button" name="btn1" id="btn+" value="+" onclick="num(this.value)" class="btnstyle" />
			<br />
			<input type="button" name="btn1" id="btn1" value="1" onclick="num(this.value)" />
			<input type="button" name="btn1" id="btn2" value="2" onclick="num(this.value)" />
			<input type="button" name="btn1" id="btn3" value="3" onclick="num(this.value)" />
			<input type="button" name="btn1" id="btn-" value="-" onclick="num(this.value)" class="btnstyle" />
			<br />
			<input type="button" name="btn1" id="btn4" value="4" onclick="num(this.value)" />
			<input type="button" name="btn1" id="btn5" value="5" onclick="num(this.value)" />
			<input type="button" name="btn1" id="btn6" value="6" onclick="num(this.value)" />
			<input type="button" name="btn1" id="*" value="×" onclick="num(this.id)" class="btnstyle" />
			<br />
			<input type="button" name="btn1" id="btn7" value="7" onclick="num(this.value)" />
			<input type="button" name="btn1" id="btn8" value="8" onclick="num(this.value)" />
			<input type="button" name="btn1" id="btn9" value="9" onclick="num(this.value)" />
			<input type="button" name="btn1" id="/" value="÷" onclick="num(this.id)" class="btnstyle" />
			<br />
			<input type="button" name="btn0" id="btn0" value="0" onclick="num(this.value)" style="width: 90px;" />
			<input type="button" name="btn1" id="btn." value="." onclick="num(this.value)" />
			<input type="button" name="btn1" id="btn=" value="=" onclick="num(this.value)" class="btnstyle" />
		</div>
	</body>
</html>