JS實現一個簡單的計算器


使用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>
復制代碼

 


免責聲明!

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



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