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)文章
本文給大家分享一段js實例代碼實現(xiàn)時鐘滴答聲效果，效果逼真，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
JS將滑動門改為選項卡（需鼠標(biāo)點擊）的實現(xiàn)方法
這篇文章主要介紹了JS將滑動門改為選項卡（需鼠標(biāo)點擊）的實現(xiàn)方法,涉及JavaScript頁面元素遍歷及樣式替換的相關(guān)技巧,再通過onmouseover與onclick即可分別實現(xiàn)滑動門與選項卡兩種效果,需要的朋友可以參考下2015-09-09
fix-ie5.js擴展在IE5下不能使用的幾個方法...2007-08-08
javascript DIV實現(xiàn)跟隨鼠標(biāo)移動
這篇文章主要為大家詳細(xì)介紹了javascript DIV跟隨鼠標(biāo)移動，有一個div跟隨鼠標(biāo)移動的結(jié)果，有一連串跟隨鼠標(biāo)移動的效果，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要源碼解讀了Bootstrap導(dǎo)航，介紹了Bootstrap各式各樣的導(dǎo)航,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript中 ES6 generator數(shù)據(jù)類型詳解
generator 是ES6引入的新的數(shù)據(jù)類型，由function* 定義, (注意*號),接下來通過本文給大家介紹js中 ES6 generator數(shù)據(jù)類型，非常不錯，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
這篇文章主要介紹了基于JavaScript實現(xiàn)單例模式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
這篇文章主要是對js導(dǎo)入導(dǎo)出excel的實例代碼進行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
關(guān)于小程序優(yōu)化的一些建議(小結(jié))
這篇文章主要介紹了關(guān)于小程序優(yōu)化的一些建議(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
javascript的繼承機制并不是明確規(guī)定的,而是通過模仿實現(xiàn)的,意味著繼承不是由解釋程序處理,開發(fā)者有權(quán)決定最適合的繼承方式.2009-08-08