怎么用JavaScript制作簡易計(jì)算器

發(fā)布時(shí)間：2021-08-12 17:01:10 來源：億速云閱讀：148 作者：chen 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“怎么用JavaScript制作簡易計(jì)算器”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

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

首先，我們在body中制作頁面需要的這些元素

<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>

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

“怎么用JavaScript制作簡易計(jì)算器”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

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

怎么用JavaScript制作簡易計(jì)算器

猜你喜歡

最新資訊

相關(guān)推薦

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