js實現(xiàn)簡易計算器功能
更新時間：2019年10月18日 08:56:42 作者：whr瑞
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡易計算器功能，制作能進行加減乘除的計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
制作能進行加減乘除的簡易計算器，主要是練習(xí)動態(tài)注冊事件。因以練習(xí)為主，所以包含了較多基礎(chǔ)方法。
效果圖
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡易計算器</title>
<script type="text/javascript">
window.onload = function(){
document.onclick = function(){
var ipts = document.getElementsByTagName("input");
for (var i = 0; i < ipts.length; i++) {//得到值和符號
if (ipts[i].type == "text") {
switch (i){
case 0:
num1 = ipts[i].value;
num1 = Number(num1);
break;
case 1:
opt = ipts[i].value;
break;
case 2:
num2 = ipts[i].value;
num2 = Number(num2);
break;
}
}
}
var res;//結(jié)果
switch (opt){//通過得到的值和符號進行計算
case "+":
res = num1 + num2;
break;
case "-":
res = num1 - num2;
break;
case "*":
res = num1 * num2;
break;
case "/":
res = num1 / num2;
break;
}
var r = document.getElementById("result");
r.value = res;
}
}
</script>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">=
<input type="text" id="result">
<input type="button" value="計算" id="btn">
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)傳遞多個參數(shù)與事件處理
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)傳遞多個參數(shù)與事件處理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
本文章為你提供一款js 返回變量的類型代碼哦，如果你不懂得如何獲取js變量的類型的話，看看我們下面的代碼你就知道如何獲取js變量的代碼哦。2010-07-07
用javascript獲得css中的屬性值的代碼...2007-08-08
javascript拖拽上傳類庫DropzoneJS使用方法
這篇文章主要介紹了javascript拖拽上傳類庫DropzoneJS使用方法，大家參考使用吧2013-12-12
首先改變被拖動元素的布局屬性，接著捕捉鼠標(biāo)事件，當(dāng)觸發(fā)mousedown時，記錄下當(dāng)前鼠標(biāo)在元素中的相對位置，接著處理mousemove事件2014-09-09
基于uni-app開發(fā)刻度尺組件的實現(xiàn)示例
本文主要介紹了基于uni-app開發(fā)刻度尺組件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
兩個等號直接比較值，但是類型不能相互轉(zhuǎn)換的時候報錯2010-04-04
本文主要介紹了Event（事件）的傳播與冒泡。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了JavaScript中Cookie操作實例,本文先是講解了Cookie的語法,然后給了實際操作實例,需要的朋友可以參考下2015-01-01
JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的查找算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的查找算法,結(jié)合具體實例形式分析了javascript針對二叉樹節(jié)點最小值、最大值的相關(guān)查找操作實現(xiàn)技巧,需要的朋友可以參考下2017-04-04