HTML 计算器代码示例 - 简单易用

<!DOCTYPE html>
<html>
<head>
	<title>Calculator</title>
	<style>
		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 50px;
		}
<pre><code>	.calculator {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #e6e6e6;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	}

	.calculator button {
		margin: 5px;
		padding: 10px 20px;
		font-size: 20px;
		background-color: #fff;
		border: none;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
		cursor: pointer;
	}

	.calculator button:hover {
		background-color: #f2f2f2;
	}

	.result {
		margin-top: 20px;
		font-size: 30px;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div class='container'>
		<div class='calculator'>
			<div class='result' id='result'>0</div>
			<button onclick='clearResult()'>C</button>
			<button onclick='deleteLast()'>CE</button>
			<button onclick='addOperator('/')'>/</button>
			<button onclick='addNumber('7')'>7</button>
			<button onclick='addNumber('8')'>8</button>
			<button onclick='addNumber('9')'>9</button>
			<button onclick='addOperator('*')'>*</button>
			<button onclick='addNumber('4')'>4</button>
			<button onclick='addNumber('5')'>5</button>
			<button onclick='addNumber('6')'>6</button>
			<button onclick='addOperator('-')'>-</button>
			<button onclick='addNumber('1')'>1</button>
			<button onclick='addNumber('2')'>2</button>
			<button onclick='addNumber('3')'>3</button>
			<button onclick='addOperator('+')'>+</button>
			<button onclick='addNumber('0')'>0</button>
			<button onclick='addNumber('.')'>.</button>
			<button onclick='calculateResult()'>=</button>
		</div>
	</div>
<pre><code>&lt;script&gt;
	var result = document.getElementById('result');

	function addNumber(number) {
		if (result.innerHTML == '0' &amp;&amp; number != '.') {
			result.innerHTML = number;
		} else {
			result.innerHTML += number;
		}
	}

	function addOperator(operator) {
		result.innerHTML += operator;
	}

	function clearResult() {
		result.innerHTML = '0';
	}

	function deleteLast() {
		result.innerHTML = result.innerHTML.slice(0, -1);
		if (result.innerHTML.length == 0) {
			result.innerHTML = '0';
		}
	}

	function calculateResult() {
		var expression = result.innerHTML;
		var resultValue = eval(expression);
		result.innerHTML = resultValue;
	}
&lt;/script&gt;
</code></pre>
</body>
</html>