DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 純js代碼實現簡單計算器
純js代碼實現簡單計算器
編輯:關於JavaScript     

本文實例分享了純js代碼實現簡單計算器代碼,相信大家會喜歡。具體如下:
運行效果截圖如下:

具體代碼如下:

<!DOCTYPE html>
<html>
 <head>
 <title> new document </title> 
 <script type="text/javascript">
  function count(){
    var txt1  = parseInt( document.getElementById('txt1').value);//獲取第一個輸入框的值
    var txt2  = parseInt( document.getElementById('txt2').value);//獲取第二個輸入框的值
    var select = document.getElementById('select').value;//獲取選擇框的值
    var result = '';
    switch (select)
     {
      case '+':
        result = txt1 + txt2;
        break;
      case '-':
        result = txt1 - txt2;
        break;
      case '*':
        result = txt1 * txt2;
        break;
      case '/':
        result = txt1 / txt2;
        break; 
     }
     document.getElementById('fruit').value = result;//設置結果輸入框的值 
  }
 </script> 
 </head> 
 <body>
  <input type='text' id='txt1' /> 
  <select id='select'>
    <option value='+'>+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type='text' id='txt2' /> 
  <input type='button' value=' = ' onclick = "count()" /> <!--通過 = 按鈕來調用創建的函數,得到結果--> 
  <input type='text' id='fruit' />  
 </body>
</html>

復制粘貼上方代碼即可實現簡單的計算器功能,希望本文所述對大家學習javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved