javascript代碼實(shí)現(xiàn)簡易計(jì)算器

更新時(shí)間：2021年01月25日 08:24:12 作者：Hope°

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

本文實(shí)例為大家分享了javascript實(shí)現(xiàn)簡易計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下

編輯了幾個(gè)小時(shí)研發(fā)了一個(gè)簡易好理解的計(jì)算器。不停改Bug，終于改好了。

這是樣式

這是Css部分

<style>
  #box {
   background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
   width: 500px;
   height: 420px;
   margin: auto;
   margin-top: 200px;
   position: relative;
  }

  .reckon {
   width: 280px;
   height: 200px;
   background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
   ;
   position: absolute;
   top: 100px;
   left: 100px;
   border: 5px solid #2a2b2c
  }

  #input1 {
   background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
   border: none;
   width: 220px;
   height: 8px;
   float: right;
   margin-top: 10px;
   margin-right: 20px;
   outline: none;
   padding: 10px
  }

  ul li {
   float: left;
   list-style: none;
   margin: 4px 2px;
   border-radius: 3px;
   background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
   box-shadow: 2px 2px #ccc;
   color: #fff;
   font-weight: "楷體";
   width: 50px;
   height: 30px;
   text-align: center;
   line-height: 30px;
  }

  ul {
   margin-top: 5px;
  }

  ul li:hover {
   opacity: 0.7;
  }
</style>

這是HTML部分

<div id="box">
  <div class="reckon" id="reckon">
   <input type="text" id="input1">
   <ul>
    <li class="num">7</li>
    <li class="num">8</li>
    <li class="num">9</li>
    <li class="opcr">+</li>

    <li class="num">4</li>
    <li class="num">5</li>
    <li class="num">6</li>
    <li class="opcr">- </li>

    <li class="num">1</li>
    <li class="num">2</li>
    <li class="num">3</li>
    <li class="opcr">*</li>

    <li class="num">0</li>
    <li id="returnZero">C</li>
    <li id="resule">=</li>
    <li class="opcr">/</li>
   </ul>
  </div>


 </div>
/* 定義兩個(gè)標(biāo)簽來存放符號跟第一個(gè)值*/
 <input type="text" id="text1" style="display:none">
 <input type="text" id="per" style="display:none">

html部分的話就是吧所有數(shù)字定義為一個(gè)class名字，把所有運(yùn)算符號定義為一個(gè)class 以及定義兩個(gè)input來存放運(yùn)算符

<script>
  lis = document.querySelectorAll("#box ul .num")//獲取所有的數(shù)字
  opcr = document.querySelectorAll("#box ul .opcr")//獲取運(yùn)算符
  for (var i = 0; i < lis.length; i++) { //遍歷所有的數(shù)字
   lis[i].onclick = function () {
    input1.value += parseInt(this.innerHTML)//點(diǎn)擊input1顯示
   }
  }
  //遍歷所有的運(yùn)算符
  for (let i = 0; i < opcr.length; i++) {
   opcr[i].onclick = function () {
    if (text1.value == "") {//當(dāng)存放第一個(gè)值為空時(shí)候
     text1.value = input1.value//存放第一個(gè)值
     input1.value = ""   //input框里的值為空
     per.value = this.innerHTML; //存放符號的值為空
    } else {
     text1.value = eval(text1.value + per.value + input1.value)//不是空的時(shí)候 計(jì)算
     per.value = this.innerHTML;//存放符號的值為點(diǎn)擊的值
     input1.value = ""http://input框里的值為空
    }
   }
  }
  //等于
  resule.onclick = function () {
   input1.value = eval(text1.value + per.value + input1.value)//計(jì)算里面的值
   per.value = "" //清空存放per的值
   text1.value = ""http://input框里的值為空

  }
  //點(diǎn)擊清空所有
  returnZero.onclick = function () {
   input1.value = ""
   per.value = ""
   text1.value = ""
  }
</script>

完整部分

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>簡易計(jì)算器</title>
 <style>
  #box {
   background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
   width: 500px;
   height: 420px;
   margin: auto;
   margin-top: 200px;
   position: relative;
  }

  .reckon {
   width: 280px;
   height: 200px;
   background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
   ;
   position: absolute;
   top: 100px;
   left: 100px;
   border: 5px solid #2a2b2c
  }

  #input1 {
   background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
   border: none;
   width: 220px;
   height: 8px;
   float: right;
   margin-top: 10px;
   margin-right: 20px;
   outline: none;
   padding: 10px
  }

  ul li {
   float: left;
   list-style: none;
   margin: 4px 2px;
   border-radius: 3px;
   background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
   box-shadow: 2px 2px #ccc;
   color: #fff;
   font-weight: "楷體";
   width: 50px;
   height: 30px;
   text-align: center;
   line-height: 30px;
  }

  ul {
   margin-top: 5px;
  }

  ul li:hover {
   opacity: 0.7;
  }
 </style>
</head>

<body>
 <div id="box">
  <div class="reckon" id="reckon">
   <input type="text" id="input1">
   <ul>
    <li class="num">7</li>
    <li class="num">8</li>
    <li class="num">9</li>
    <li class="opcr">+</li>

    <li class="num">4</li>
    <li class="num">5</li>
    <li class="num">6</li>
    <li class="opcr">- </li>

    <li class="num">1</li>
    <li class="num">2</li>
    <li class="num">3</li>
    <li class="opcr">*</li>

    <li class="num">0</li>
    <li id="returnZero">C</li>
    <li id="resule">=</li>
    <li class="opcr">/</li>
   </ul>
  </div>


 </div>

 <input type="text" id="text1" style="display:block">
 <input type="text" id="per" style="display:block">

 <script>
  lis = document.querySelectorAll("#box ul .num")//獲取所有的數(shù)字
  opcr = document.querySelectorAll("#box ul .opcr")//獲取+——*/
  for (var i = 0; i < lis.length; i++) { //遍歷所有的數(shù)字
   lis[i].onclick = function () {
    input1.value += parseInt(this.innerHTML)//點(diǎn)擊input1顯示
   }
  }

  //遍歷所有的+——*/
  for (let i = 0; i < opcr.length; i++) {
   opcr[i].onclick = function () {
    if (text1.value == "") {//當(dāng)存放第一個(gè)值為空時(shí)候
     text1.value = input1.value//存放第一個(gè)值
     input1.value = ""   //input框里的值為空
     per.value = this.innerHTML; //存放符號的值為空
    } else {
     text1.value = eval(text1.value + per.value + input1.value)//不是空的時(shí)候 計(jì)算值
     per.value = this.innerHTML;//存放符號的值為點(diǎn)擊的值
     input1.value = ""http://input框里的值為空
    }
   }
  }
  //等于
  resule.onclick = function () {
   input1.value = eval(text1.value + per.value + input1.value)//計(jì)算里面的值
   per.value = "" //清空存放per的值
   text1.value = ""http://input框里的值為空

  }
  //點(diǎn)擊清空所有
  returnZero.onclick = function () {
   input1.value = ""
   per.value = ""
   text1.value = ""
  }
 </script>
</body>
</html>

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

您可能感興趣的文章: