快捷導(dǎo)航

JavaScript簡(jiǎn)易計(jì)算器制作

更新時(shí)間：2020年01月17日 14:34:20 作者：Qiie

這篇文章主要為大家詳細(xì)介紹了JavaScript簡(jiǎn)易計(jì)算器制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下

成品圖

這個(gè)簡(jiǎn)易的計(jì)算器只能實(shí)現(xiàn) + - * /的運(yùn)算

在動(dòng)手之前，我們要先理清思路，看圖，若想實(shí)現(xiàn)這樣一個(gè)簡(jiǎn)易的計(jì)算器，我們需要兩個(gè)輸入框用來(lái)存放我們需要進(jìn)行運(yùn)算的兩個(gè)值，一個(gè)下拉框來(lái)選擇要進(jìn)行什么運(yùn)算，一個(gè)按鈕來(lái)實(shí)現(xiàn)開始運(yùn)算，一個(gè)輸入框來(lái)保存我們計(jì)算后的值！

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

<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你可隨意起，好用就行
接下來(lái)就是最重要的JavaScript的地方了

<body>
 <script>
  //獲取頁(yè)面標(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ǔ)句來(lái)寫運(yùn)算語(yǔ)句
   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值中，在頁(yè)面上顯示
   inpt3.value = endValue;
  }
 </script>
</body>

這樣一個(gè)簡(jiǎn)易的頁(yè)面計(jì)算器就做好了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: