使用js實(shí)現(xiàn)簡易計(jì)算器的代碼分享

發(fā)布時(shí)間：2020-04-08 15:09:31 來源：億速云閱讀：279 作者：小新欄目：web開發(fā)

本篇文章和大家了解一下使用js實(shí)現(xiàn)簡易計(jì)算器的代碼分享。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

效果圖：

使用js實(shí)現(xiàn)簡易計(jì)算器的代碼分享

首先，我們?cè)赽ody中制作頁面需要的這些元素

<body>
 <input type="text" id="ipt1">
 <select name="" id="slt">
  <option value="+">+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
 </select>
 <input type="text" id="ipt2">
 <button id="btn">=</button>
 <input type="text" id="ipt3">
</body>

上面的id你可隨意起，好用就行。

javascript代碼：

<body>
 <script>
  //獲取頁面標(biāo)簽的元素
  var inpt1 = document.getElementById("ipt1");
  var inpt2 = document.getElementById("ipt2");
  var inpt3 = document.getElementById("ipt3");
  var selt = document.getElementById("slt");
  var butn = document.getElementById("btn");
   
 //給等于按鈕添加點(diǎn)擊事件
  butn.onclick = function(){
   //將三個(gè)輸入框的value值分別賦給變量t1,t2,t3中
   var t1 = parseFloat(ipt1.value);
   var t2 = parseFloat(ipt2.value);
   var t3 = parseFloat(ipt3.value);
 
 //定義一個(gè)結(jié)果變量用于存放結(jié)果
   var endValue;
   //用switch語句來寫運(yùn)算語句
   switch(slt.value){
    case "+":
    endValue = t1 + t2;
    break;
    case "-":
    endValue = t1 - t2;
    break;
    case "*":
    endValue = t1 * t2;
    break;
    case "/":
    endValue = t1 / t2;
    break;
    default:
    endValue = t1 + t2;
    break;
   }
   //將結(jié)果放入結(jié)果輸入框的value值中，在頁面上顯示
   inpt3.value = endValue;
  }
 </script>
</body>

關(guān)于使用js實(shí)現(xiàn)簡易計(jì)算器的代碼就分享到這里了，當(dāng)然并不止以上和大家分析的辦法，不過小編可以保證其準(zhǔn)確性是絕對(duì)沒問題的。希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到

向AI問一下細(xì)節(jié)

使用js實(shí)現(xiàn)簡易計(jì)算器的代碼分享

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽