
使用JS完成一個簡單的計算器功能。實現2個輸入框中輸入整數后,點擊第三個輸入框能給出2個整數的加減乘除。效果如上:
第一步: 創建構建運算函數count()。
第二步: 獲取兩個輸入框中的值和獲取選擇框的值。
提示:document.getElementById( id名 ).value 獲取或設置 id名的值。
第三步: 獲取通過下拉框來選擇的值來改變加減乘除的運算法則。
提示:使用switch判斷運算法則。
第四步: 通過 = 按鈕來調用創建的函數,得到結果。
注意: 使用parseInt()函數可解析一個字符串,並返回一個整數。
代碼:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> 事件</title>
5 <script type="text/javascript">
6 function count(){
7 var a = document.getElementById("txt1").value;
8 var b = document.getElementById("txt2").value;
9 //獲取第一個輸入框的值
10 //獲取第二個輸入框的值
11 //獲取選擇框的值
12 var c = document.getElementById("select").value;
13 a = parseFloat(a);
14 b = parseFloat(b);
15 //獲取通過下拉框來選擇的值來改變加減乘除的運算法則
16 //設置結果輸入框的值
17 switch(c){
18 case "+":
19 document.getElementById("fruit").value=parseInt(a)+parseInt(b);
20 break;
21 case "-":
22 document.getElementById("fruit").value=parseInt(a)-parseInt(b);
23 break;
24 case "*":
25 ocument.getElementById("fruit").value=parseInt(a)*parseInt(b);
26 break;
27 case "/":
28 document.getElementById("fruit").value=parseInt(a)/parseInt(b);
29 break;
30 }
31 }
32 </script>
33 </head>
34 <body>
35 <input type='text' id='txt1' />
36 <select id='select'>
37 <option value="+">+</option>
38 <option value="-">-</option>
39 <option value="*">*</option>
40 <option value="/">/</option>
41 </select>
42 <input type='text' id='txt2' />
43 <input type='button' value=' = ' onclick = "count()"/>
44 <input type='text' id='fruit' />
45 </body>
46 </html>

