JavaScript中如何實現(xiàn)簡易計算器-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)JavaScript中如何實現(xiàn)簡易計算器的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司是專業(yè)的偏關(guān)網(wǎng)站建設(shè)公司，偏關(guān)接單;提供網(wǎng)站設(shè)計、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行偏關(guān)網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

具體內(nèi)容如下

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
  * {
   padding: 0;
   margin: 0;
  }
  li {
   list-style: none;
  }
  body {
   background: #940032;
  }

  #counter {
   width: 500px;
   height: 420px;
   background: #939;
   margin: 50px auto 0;
   position: relative;
  }

  #counter h3 {
   line-height: 42px;
   padding-left: 15px;
   font-size: 14px;
   font-family: arial;
   color: #ff3333;
  }

  #counter a {
   font-weight: normal;
   text-decoration: none;
   color: #ff3333;
  }

  #counter a:hover {
   text-decoration: underline;
  }

  #bg {
   width: 280px;
   height: 200px;
   border: 3px solid #680023;
   background: #990033;
   filter: alpha(opacity=80);
   opacity: 0.8;
   position: absolute;
   left: 50%;
   top: 115px;
   margin-left: -141px;
  }

  #counter_content {
   width: 250px;
   position: absolute;
   top: 130px;
   left: 130px;
   z-index: 1;
  }

  #counter_content h4 {
   margin-bottom: 10px;
  }

  #counter_content h4 input {
   border: none;
   width: 223px;
   height: 30px;
   line-height: 30px;
   padding: 0 10px;
   background: url(img/ico.png) no-repeat;
   text-align: right;
   color: #333;
   font-size: 14px;
   font-weight: bold;
  }

  #counter_content div {
   width: 250px;
  }

  #counter_content input {
   width: 60px;
   height: 30px;
   line-height: 30px;
   float: left;
   background: url(img/ico.png) no-repeat -303px 0;
   text-align: center;
   color: #fff;
   cursor: pointer;
   margin: 0 1px 4px 0;
   border: 0;
  }

  #counter_content div > input:hover {
   background: url(img/ico.png) no-repeat -243px 0;
  }

  #counter p {
   width: 500px;
   position: absolute;
   bottom: 20px;
   left: 0;
   color: #ff3333;
   text-align: center;
   font-size: 12px;
  }
 </style>
</head>
<body>
<div id="counter">
 <h3>簡易計算</h3>
 <div id="counter_content">
  <h4><input id="input1" type="text" value="0"/></h4>
  <div id="div1">
   <input type="button" value="7" onclick="kick('7')"/>
   <input type="button" value="8" onclick="kick('8')"/>
   <input type="button" value="9" onclick="kick('9')"/>
   <input type="button" value="+" onclick="kick('+')"/>
   <input type="button" value="4" onclick="kick('4')"/>
   <input type="button" value="5" onclick="kick('5')"/>
   <input type="button" value="6" onclick="kick('6')"/>
   <input type="button" value="-" onclick="kick('-')"/>
   <input type="button" value="1" onclick="kick('1')"/>
   <input type="button" value="2" onclick="kick('2')"/>
   <input type="button" value="3" onclick="kick('3')"/>
   <input type="button" value="*" onclick="kick('*')"/>
   <input type="button" value="0" onclick="kick('0')"/>
   <input type="button" value="C" onclick="kick('C')"/>
   <input type="button" value="=" onclick="kick('=')"/>
   <input type="button" value="/" onclick="kick('/')"/>
  </div>
 </div>
</div>
</body>
<script>
 var showInput = document.getElementById("input1");
 var isClear = false;
 var tempStr = "";
 var clacType = "";
 var isContinue = true;
 function kick(clickValue) {
  switch (clickValue) {
   case "=":
    if (tempStr != "" && clacType != "") {
     showInput.value = clac(tempStr, showInput.value, clacType);
     isContinue = false;
     clacType = "";
    }
    break;
   case "+":
   case "-":
   case "*":
   case "/":
    //如果預(yù)存的操作符不為空 表示表示連續(xù)操作
    if (clacType != "" && !isContinue) { //先執(zhí)行計算
     tempStr = clac(tempStr, showInput.value, clacType);
     isClear = true;
     clacType = clickValue;
    } else {
     tempStr = showInput.value; //點擊操作符之后 預(yù)存字符
     isClear = true;//表示點擊了操作符
     clacType = clickValue;//預(yù)存操作符
    }
    isContinue = true;
    break;
   case "C":
    showInput.value = "0";
    isClear = false;
    tempStr = "";
    clacType = "";
    break;
   default://普通的數(shù)字按鈕點擊
    showInput.value = showInput.value == "0" ? "" : showInput.value;
    isContinue = false;
    if (isClear) {
     showInput.value = "";
     showInput.value += clickValue;
     isClear = false;
    } else {
     showInput.value += clickValue;
    }
    break;
  }
 }


 function clac(num1, num2, type) {
  switch (type) {
   case "+":
    return Number(num1) + Number(num2);
   case "-":
    return Number(num1) - Number(num2);
   case "*":
    return Number(num1) * Number(num2);
   case "/":
    return Number(num1) / Number(num2);
   default:
    break;
  }
  }
 </script>

感謝各位的閱讀！關(guān)于“JavaScript中如何實現(xiàn)簡易計算器”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章題目：JavaScript中如何實現(xiàn)簡易計算器-創(chuàng)新互聯(lián)
本文來源：http://muchs.cn/article32/dooesc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站維護、做網(wǎng)站

廣告

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

手機網(wǎng)站建設(shè)