JavaScript簡易計算器制作
更新時間：2020年01月17日 14:34:20 作者：Qiie
這篇文章主要為大家詳細(xì)介紹了JavaScript簡易計算器制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)簡易計算器的具體代碼，供大家參考，具體內(nèi)容如下
成品圖
這個簡易的計算器只能實現(xiàn) + - * /的運算
在動手之前，我們要先理清思路，看圖，若想實現(xiàn)這樣一個簡易的計算器，我們需要兩個輸入框用來存放我們需要進行運算的兩個值，一個下拉框來選擇要進行什么運算，一個按鈕來實現(xiàn)開始運算，一個輸入框來保存我們計算后的值！
首先，我們在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");
//給等于按鈕添加點擊事件
butn.onclick = function(){
//將三個輸入框的value值分別賦給變量t1,t2,t3中
var t1 = parseFloat(ipt1.value);
var t2 = parseFloat(ipt2.value);
var t3 = parseFloat(ipt3.value);
//定義一個結(jié)果變量用于存放結(jié)果
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;
}
//將結(jié)果放入結(jié)果輸入框的value值中，在頁面上顯示
inpt3.value = endValue;
}
</script>
</body>
這樣一個簡易的頁面計算器就做好了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React Native登錄之指紋登錄篇,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
這篇文章主要介紹了基于正則表達式的輕量提示插件，兼容性強卻文件輕巧的文本框檢測插件,推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)彈幕墻效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
本文主要分享了js實現(xiàn)文字選中分享功能的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
JavaScript面向?qū)ο蟪绦蛟O(shè)計中對象的定義和繼承詳解
這篇文章主要介紹了JavaScript面向?qū)ο蟪绦蛟O(shè)計中對象的定義和繼承,結(jié)合實例形式詳細(xì)分析了javascript面向?qū)ο蟪绦蛟O(shè)計中對象定義、繼承、屬性、方法、深拷貝等相關(guān)概念與操作技巧,需要的朋友可以參考下2019-07-07
解決webpack dev-server不能匹配post請求的問題
這篇文章主要介紹了解決webpack不能匹配post請求的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
JavaScript實現(xiàn)封閉區(qū)域布爾運算的示例代碼
這篇文章主要介紹了JavaScript實現(xiàn)封閉區(qū)域布爾運算的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了JS使用cookie保存用戶登錄信息操作,結(jié)合具體實例形式分析了javascript使用cookie實現(xiàn)針對用戶信息的存儲與讀取相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
JS生態(tài)系統(tǒng)加速npm腳本優(yōu)化及性能分析探索
這篇文章主要為大家介紹了JS生態(tài)系統(tǒng)加速npm腳本優(yōu)化及性能分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
閉包是一個比較抽象的概念,尤其是對js新手來說.書上的解釋實在是比較晦澀,對我來說也是一樣.閉包是很多語言都具備的特性,在js中,閉包主要涉及到j(luò)s的幾個其他的特性:作用域鏈,垃圾(內(nèi)存)回收機制,函數(shù)嵌套,等等.2015-03-03