快捷導(dǎo)航

js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能

更新時(shí)間：2019年10月18日 08:56:42 作者：whr瑞

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能，制作能進(jìn)行加減乘除的計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

制作能進(jìn)行加減乘除的簡(jiǎn)易計(jì)算器，主要是練習(xí)動(dòng)態(tài)注冊(cè)事件。因以練習(xí)為主，所以包含了較多基礎(chǔ)方法。

效果圖

代碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>簡(jiǎn)易計(jì)算器</title>
 <script type="text/javascript">
 window.onload = function(){
 document.onclick = function(){
  var ipts = document.getElementsByTagName("input");
  for (var i = 0; i < ipts.length; i++) {//得到值和符號(hào)
  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){//通過得到的值和符號(hào)進(jìn)行計(jì)算
  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="計(jì)算" id="btn">
 </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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