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

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

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

制作能進(jìn)行加減乘除的簡易計算器，主要是練習(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){//通過得到的值和符號進(jìn)行計算
  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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
計算器

相關(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變量的類型的話，看看我們下面的代碼你就知道如何獲取js變量的代碼哦。
2010-07-07
用javascript獲得css中的屬性值的代碼
用javascript獲得css中的屬性值的代碼...
2007-08-08
javascript拖拽上傳類庫DropzoneJS使用方法
這篇文章主要介紹了javascript拖拽上傳類庫DropzoneJS使用方法，大家參考使用吧
2013-12-12
原生javascript實(shí)現(xiàn)拖動元素示例代碼
首先改變被拖動元素的布局屬性，接著捕捉鼠標(biāo)事件，當(dāng)觸發(fā)mousedown時，記錄下當(dāng)前鼠標(biāo)在元素中的相對位置，接著處理mousemove事件
2014-09-09
基于uni-app開發(fā)刻度尺組件的實(shí)現(xiàn)示例
本文主要介紹了基于uni-app開發(fā)刻度尺組件的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
JS的反射問題
兩個等號直接比較值，但是類型不能相互轉(zhuǎn)換的時候報錯
2010-04-04
Javascript Event（事件）的傳播與冒泡
本文主要介紹了Event（事件）的傳播與冒泡。具有很好的參考價值，下面跟著小編一起來看下吧
2017-01-01
JavaScript中Cookie操作實(shí)例
這篇文章主要介紹了JavaScript中Cookie操作實(shí)例,本文先是講解了Cookie的語法,然后給了實(shí)際操作實(shí)例,需要的朋友可以參考下
2015-01-01
JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的查找算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的查找算法,結(jié)合具體實(shí)例形式分析了javascript針對二叉樹節(jié)點(diǎn)最小值、最大值的相關(guān)查找操作實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-04-04