使用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>