簡易計算機html+js

簡易實現計算機用HTML+JS

Style的部分

 <style>
		#calculator {
			width: 370px;
                       padding: 24px;
			border: 1px solid #ccc;
			border-radius: 5px;
			box-shadow: 0 0 5px #ccc;
			margin: 0 auto;
			font-family: Arial, sans-serif;
		}

		input[type="button"] {
			width: 50px;
			height: 50px;
			font-size: 20px;
			margin: 5px;
			border-radius: 5px;
			border: none;
			box-shadow: 0 0 5px #ccc;
			background-color: #eee;
			cursor: pointer;
		}

		input[type="text"] {
			width: 100%;
			height: 50px;
			font-size: 20px;
			margin-bottom: 10px;
			border-radius: 5px;
			border: none;
			box-shadow: 0 0 5px #ccc;
			padding: 10px;
			text-align: right;
		}

	</style>

HTML

<div id="calculator">
		<input type="text" id="display" readonly>
		<input type="button" value="7" onclick="addToDisplay('7')">
		<input type="button" value="8" onclick="addToDisplay('8')">
		<input type="button" value="9" onclick="addToDisplay('9')">
		<input type="button" value="+" onclick="addToDisplay('+')">
		<input type="button" value="-" onclick="addToDisplay('-')">
		<input type="button" value="4" onclick="addToDisplay('4')">
		<input type="button" value="5" onclick="addToDisplay('5')">
		<input type="button" value="6" onclick="addToDisplay('6')">
		<input type="button" value="*" onclick="addToDisplay('*')">
		<input type="button" value="/" onclick="addToDisplay('/')">
		<input type="button" value="1" onclick="addToDisplay('1')">
		<input type="button" value="2" onclick="addToDisplay('2')">
		<input type="button" value="3" onclick="addToDisplay('3')">
		<input type="button" value="0" onclick="addToDisplay('0')">
		<input type="button" value="C" onclick="clearDisplay()">
		<input type="button" value="=" onclick="calculate()">
	</div>

<script>
		function addToDisplay(value) {
			document.getElementById('display').value += value;
		}

		function clearDisplay() {
			document.getElementById('display').value = '';
		}

		function calculate() {
			var expression = document.getElementById('display').value;
			var result = eval(expression);
			document.getElementById('display').value = result;
		}
</script>

文章轉載或引用，請先告知並保留原文出處與連結！！(單純分享或非營利的只需保留原文出處，不用告知)

原文連結:
https://blog.aidec.tw/post/Test01

若有業務合作需求，可寫信至： opweb666@gmail.com

創業、網站經營相關內容未來將發布在小易創業筆記

相關文章