JS實(shí)現(xiàn)簡易計(jì)算器的方法

這篇文章主要介紹了JS實(shí)現(xiàn)簡易計(jì)算器的方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)淮上,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

具體內(nèi)容如下

首先創(chuàng)建結(jié)構(gòu)和樣式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body{
   margin:0;
   padding:0;
   background-color: #abcdef;
  }
  .cal{
   width:560px;
   height:100px;
   margin:0 auto;
   padding-top:300px;
  }
 </style>
</head>
<body>

 <div class="cal">
  <p>
   <input type="text" class="num1" value="1">
   <span class="sign">+</span>
   <input type="text" class="num2" value="1">
   <span>=</span>
   <span class="res">2</span>
  </p>
  <p>
   <input type="button" value="+">
   <input type="button" value="-">
   <input type="button" value="*">
   <input type="button" value="/">
  </p>   
 </div>
<script>


</script>

</body>
</html>

然后添加Java script

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body{
   margin:0;
   padding:0;
   background-color: #abcdef;
  }
  .cal{
   width:560px;
   height:100px;
   margin:0 auto;
   padding-top:300px;
  }
 </style>
</head>
<body>

 <div class="cal">
  <p>
   <input type="text" class="num1" value="1">
   <span class="sign">+</span>
   <input type="text" class="num2" value="1">
   <span>=</span>
   <span class="res">2</span>
  </p>
  <p>
   <input type="button" value="+" class="btn">
   <input type="button" value="-" class="btn">
   <input type="button" value="*" class="btn">
   <input type="button" value="/" class="btn">
  </p>   
 </div>

<script>
 var cal=document.querySelector(".cal");
 var num1=cal.querySelector(".num1");
 var num2=cal.querySelector(".num2");
 var sign=cal.querySelector(".sign");
 var res=cal.querySelector(".res");

 var btns=cal.querySelectorAll(".btn");

 btns[0].onclick=add;
 btns[1].onclick=subtract;
 btns[2].onclick=multiply;
 btns[3].onclick=divide;

 function add(){
  sign.innerHTML="+";
  //由于DOM獲取到的值都是字符串形式，因此進(jìn)行操作時(shí)需要先轉(zhuǎn)為number類型
  res.innerHTML=Number(num1.value)+Number(num2.value);
 }
 function subtract(){
  sign.innerHTML="-";
  res.innerHTML=Number(num1.value)-Number(num2.value);
 }
 function multiply(){
  sign.innerHTML="*";
  res.innerHTML=Number(num1.value)*Number(num2.value); 
 }
 function divide(){
  sign.innerHTML="/";
  res.innerHTML=Number(num1.value)/Number(num2.value); 
 }
</script>

</body>
</html>

代碼的優(yōu)化：

循環(huán)實(shí)現(xiàn)綁定

給一個(gè)外部接口，用于新增運(yùn)算

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body{
   margin:0;
   padding:0;
   background-color: #abcdef;
  }
  .cal{
   width:560px;
   height:100px;
   margin:0 auto;
   padding-top:300px;
  }
 </style>
</head>
<body>

 <div class="cal">
  <p>
   <input type="text" class="num1" value="1">
   <span class="sign">+</span>
   <input type="text" class="num2" value="1">
   <span>=</span>
   <span class="res">2</span>
  </p>
  <p>
   <input type="button" value="+" class="btn" title="add">
   <input type="button" value="-" class="btn" title="subtract">
   <input type="button" value="*" class="btn" title="multiply">
   <input type="button" value="/" class="btn" title="divide">
   <input type="button" value="%" class="btn" title="mod">
  </p>   
 </div>

<script>
 var cal=document.querySelector(".cal");
 var num1=cal.querySelector(".num1");
 var num2=cal.querySelector(".num2");
 var sign=cal.querySelector(".sign");
 var res=cal.querySelector(".res");

 var btns=cal.querySelectorAll(".btn");

 //給每個(gè)按鈕綁定事件
 for(var i=0;i<btns.length;i++){
  operate(i);
 }

 //運(yùn)算函數(shù)
 function operate(i){
  var op=btns[i].value;//獲取運(yùn)算
  var opName=btns[i].title;//獲取運(yùn)算名
  //綁定事件
  btns[i].onclick=function(){
   sign.innerHTML=op;
   res.innerHTML=operation[opName](Number(num1.value),Number(num2.value));
  }
 }

 var operation={
  add:function(n1,n2){
   return n1+n2;
  },
  subtract:function(n1,n2){
   return n1-n2;
  },
  multiply:function(n1,n2){
   return n1*n2;
  },
  divide:function(n1,n2){
   return n1/n2;
  },
  //給一個(gè)新增運(yùn)算的接口
  addOperation:function(name,fn){
   //如果該運(yùn)算不存在
   if(!this.name){
    this[name]=fn;
   }
  }
 }

 //新增取余運(yùn)算
 operation.addOperation("mod",function(n1,n2){
  return n1%n2;
 });
</script>

</body>
</html>

這樣就圓滿完成咯

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JS實(shí)現(xiàn)簡易計(jì)算器的方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

本文名稱：JS實(shí)現(xiàn)簡易計(jì)算器的方法
路徑分享：http://bm7419.com/article10/igiedo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站維護(hù)、關(guān)鍵詞優(yōu)化、Google、用戶體驗(yàn)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)