純js代碼實現簡單計算器

更新時間：2015年12月02日 11:14:42 投稿：lijiao

這篇文章主要介紹了純js代碼實現簡單計算器，功能超簡單，實現加減乘除簡單運算，感興趣的小伙伴們可以參考一下

本文實例分享了純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()" /> <!--通過 = 按鈕來調用創(chuàng)建的函數，得到結果--> 
  <input type='text' id='fruit' />  
 </body>
</html>

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

您可能感興趣的文章:

js
計算器

javascript 新聞標題靜態(tài)分頁代碼 (無刷新)
一個模板，從數據庫取n條記錄，生成靜態(tài)。做單頁面的靜態(tài)化,索引頁面是用JS對數組進行組合的。
2010-03-03
JavaScript @umijs/plugin-locale插件使用教程
這篇文章主要介紹了JavaScript @umijs/plugin-locale插件使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-12-12
淺談js圖片前端預覽之filereader和window.URL.createObjectURL
下面小編就為大家?guī)硪黄獪\談js圖片前端預覽之filereader和window.URL.createObjectURL。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
Javascript String對象擴展HTML編碼和解碼的方法
Javascript String對象擴展HTML編碼和解碼的代碼
2009-06-06
JavaScript實現簡單圖片輪播效果
這篇文章主要介紹了JavaScript實現簡單圖片輪播效果，點擊下標切換到該圖片上，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
Bootstrap Paginator分頁插件使用方法詳解
這篇文章主要為大家詳細介紹了Bootstrap Paginator分頁插件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05
javascript實現點擊按鈕讓DIV層彈性移動的方法
這篇文章主要介紹了javascript實現點擊按鈕讓DIV層彈性移動的方法,實例分析了javascript操作div層的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
javascript實現youku的視頻代碼自適應寬度
這篇文章主要介紹了javascript實現youku的視頻代碼自適應寬度的方法的示例，十分的簡單實用，有需要的小伙伴可以參考下。
2015-05-05
JavaScript對數組進行隨機重排的方法
這篇文章主要介紹了JavaScript對數組進行隨機重排的方法,實例分析了javascript實現數組隨機重新排序的兩種實現技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
javascript中replace使用方法總結
這篇文章主要為大家詳細介紹了javascript中replace的使用方法，使用replace和正則表達式共同實現字符串trim方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03