技術標籤：webjavascripthtml

JavaScript實現簡單的計算器（一）

效果圖

在輸入框中分別輸入整數後點擊下方的按鈕就可以將結果顯示在下方的結果框中

html部分

		<span>整數1：</span>
		<input type="text" id="number1"/><br />
		<span>整數2：</span>
		<input type="text" id="number2"/>
		<div style=
 
"margin: 5px 0 5px 0;">
			<input type="button" value="相加" id="btn1" onclick="docal(this)"/>
			<input type="button" value="相減" id="btn2" onclick="docal(this)"/>
			<input type="button" value=
 
"相乘" id="btn3" onclick="docal(this)"/>
			<input type="button" value="相除" id="btn4" onclick="docal(this)"/>
		</div>
		<span>結果：</span>
		<input type="text" id="result" id="number"
 
 /><br />

js部分

function docal(sum){
			//獲取輸入框的value值，即輸入的值
			var str1=document.getElementById("number1").value;
			var str2=document.getElementById("number2").value;
			var str;
			var a=parseInt(str1);
			var b=parseInt(str2);
				switch(sum.value){
					case "相加":
					str=a+b;
					break;
					case "相減":
					str=a-b;
					break;
					case "相乘":
					str=a*b;
					break;
					case "相除":
					str=a/b;
					break;
				}
				//將計算結果設定給輸入框的value屬性顯示
				document.getElementById("result").value = str;
			}