JS实现简易计算器

 更新时间:2020年02月14日 09:07:04   作者:天予不洗头   我要评论
这篇文章主要为大家详细介绍了JS实现简易计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

用JS实现简易计算器,供大家参考,具体内容如下

首先创建结构和样式

<!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获取到的值都是字符串形式,因此进行操作时需要先转为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>

代码的优化:

循环实现绑定

给一个外部接口,用于新增运算

<!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");

  //给每个按钮绑定事件
  for(var i=0;i<btns.length;i++){
    operate(i);
  }

  //运算函数
  function operate(i){
    var op=btns[i].value;//获取运算
    var opName=btns[i].title;//获取运算名
    //绑定事件
    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;
    },
    //给一个新增运算的接口
    addOperation:function(name,fn){
      //如果该运算不存在
      if(!this.name){
        this[name]=fn;
      }
    }
  }

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

</body>
</html>

这样就圆满完成咯

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

最新评论