JavaScript簡易計算器製作
阿新 • • 發佈：2020-01-18
本文例項為大家分享了JavaScript實現簡易計算器的具體程式碼，供大家參考，具體內容如下
成品圖
這個簡易的計算器只能實現 + - * /的運算
在動手之前，我們要先理清思路，看圖，若想實現這樣一個簡易的計算器，我們需要兩個輸入框用來存放我們需要進行運算的兩個值，一個下拉框來選擇要進行什麼運算，一個按鈕來實現開始運算，一個輸入框來儲存我們計算後的值！
首先，我們在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>
//獲取頁面標籤的元素
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");
//給等於按鈕新增點選事件
butn.onclick = function(){
//將三個輸入框的value值分別賦給變數t1,t2,t3中
var t1 = parseFloat(ipt1.value);
var t2 = parseFloat(ipt2.value);
var t3 = parseFloat(ipt3.value);
//定義一個結果變數用於存放結果
var endValue;
//用switch語句來寫運算語句
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;
}
//將結果放入結果輸入框的value值中，在頁面上顯示
inpt3.value = endValue;
}
</script>
</body>這樣一個簡易的頁面計算器就做好了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。