JS事件 編程練習-自制計算器 使用JS完成一個簡單的計算器功能。實現2個輸入框中輸入整數后,點擊第三個輸入框能給出2個整數的加減乘除。


編程練習

使用JS完成一個簡單的計算器功能。實現2個輸入框中輸入整數后,點擊第三個輸入框能給出2個整數的加減乘除。

提示:獲取元素的值設置和獲取方法為:例:賦值:document.getElementById(“id”).value = 1; 取值:var = document.getElementById(“id”).value;

任務

第一步: 創建構建運算函數count()。

第二步: 獲取兩個輸入框中的值和獲取選擇框的值。

提示:document.getElementById( id名 ).value 獲取或設置 id名的值。

第三步: 獲取通過下拉框來選擇的值來改變加減乘除的運算法則。

提示:使用switch判斷運算法則。

第四步:  通過 = 按鈕來調用創建的函數,得到結果。

注意: 使用parseInt()函數可解析一個字符串,並返回一個整數。


<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>  
 <script type="text/javascript">
  function count(){
		var a = parseInt(document.getElementById("tex1").value);
		var b = parseInt(document.getElementById("tex2").value);
		var selectSign = document.getElementById("select").value;

		switch (selectSign)
		{
		case '+': answer = a+b;break;
		case '-': answer = a-b;break;
		case '*': answer = a*b;break;
		case '/': answer = a/b;		
		}
		document.getElementById("fruit").value = answer;
  }
 </script> 
 </head>
<body>
  <input type="text" id="tex1" />
  <select id="select">
		<option value="+">+</option>
		<option value="-">-</option>
		<option value="*">*</option>
		<option value="/">/</option>
  </select>
  <input type="text" id="tex2" />
  <input type="button" value=" = " onclick="count()" />
  <input type="text" id="fruit" onclick="count()" />
</body>
</html>




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM