5-13、简易计算器

最新推荐文章于 2022-10-30 21:25:09 发布

鸵鸟大师

最新推荐文章于 2022-10-30 21:25:09 发布

阅读量151

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_30754745/article/details/108352938

版权

JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

最容易想到的方式：

//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>
</head>
<style>
  div{margin-top: 200px;}
  p {text-align: center;}
  input{ width:250px;height: 30px;font-size: 27px;}
  button{width:60px;height: 40px; margin-left: 20px;margin-top: 30px;font-size: 25px; }
  span{font-size: 25px;}
</style>
<body>
  <div>
    <p>
      <input type="text" name="" id="num1" >
      <span id="fuhao">+</span>
      <input type="text" name="" id="num2" >
      <span>=</span>
      <span id="jieguo"></span>
    </p>
    <p>
      <button id="jia">+</button>
      <button id="jian">-</button>
      <button id="cheng">×</button>
      <button id="chu">÷</button>
    </p>
  </div>
</body>
</html>
<script src="./js/jsq.js"></script>

//js
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var jia = document.getElementById("jia");
var jian = document.getElementById("jian");
var jian = document.getElementById("jian");
var chu = document.getElementById("chu");
var fuhao = document.getElementById("fuhao");
var jieguo = document.getElementById("jieguo");

jia.addEventListener("click",function(){
  fuhao.innerHTML = this.innerHTML;
   /**在这里注意 num1.value被认定为了字符串，被连接 1+1=11，
   所以需要在前面加上一个+，将其强制转换成数字**/
 jieguo.innerHTML = +num1.value + +num2.value;
});
jian.addEventListener("click",function(){
  fuhao.innerHTML = this.innerHTML;
  jieguo.innerHTML = num1.value - num2.value;
});
cheng.addEventListener("click",function(){
  fuhao.innerHTML = this.innerHTML;
  jieguo.innerHTML = num1.value * num2.value;
});
chu.addEventListener("click",function(){
  fuhao.innerHTML = this.innerHTML;
  jieguo.innerHTML = num1.value / num2.value;
});

第一次优化：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div{margin-top: 200px;}
  p {text-align: center;}
  input[type="text"]{width:250px;height: 30px;font-size: 27px;}
  input[type="button"]{ width:60px;height: 40px;margin-left: 20px;margin-top: 30px;font-size: 25px;}
  span{ font-size: 25px;}
</style>
<body>
  <div id="box">
    <p>
      <input type="text" name="" id="num1" >
      <span id="fuhao">+</span>
      <input type="text" name="" id="num2" >
      <span>=</span>
      <span id="jieguo"></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>
</body>
</html>
<script src="./js/jsq.js"></script>

var box = document.getElementById("box");
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var fuhao = document.getElementById("fuhao");
var jieguo = document.getElementById("jieguo");
var btn = box.querySelectorAll(".btn");

btn[0].addEventListener("click", add);
btn[1].addEventListener("click",sub);
btn[2].addEventListener("click",mul);
btn[3].addEventListener("click",divi);
function add(){
  fuhao.innerHTML = this.value;
 jieguo.innerHTML = +num1.value + +num2.value;
}
function sub(){
  fuhao.innerHTML = this.value;
  jieguo.innerHTML = num1.value - num2.value;
}
function mul(){
  fuhao.innerHTML = this.value;
  jieguo.innerHTML = num1.value * num2.value;
}
function divi(){
  fuhao.innerHTML = this.value;
  jieguo.innerHTML = num1.value / num2.value;
}

第二次优化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div{margin-top: 200px;}
  p {text-align: center;}
  input[type="text"]{width:250px;height: 30px;font-size: 27px;}
  input[type="button"]{ width:60px;height: 40px;margin-left: 20px;margin-top: 30px;font-size: 25px;}
  span{ font-size: 25px;}
</style>
<body>
  <div id="box">
    <p>
      <input type="text" name="" id="num1" >
      <span id="fuhao">+</span>
      <input type="text" name="" id="num2" >
      <span>=</span>
      <span id="jieguo"></span>
    </p>
    <p>
      <input type="button" value="+" class="btn" title="add">
      <input type="button" value="-" class="btn" title="sub">
      <input type="button" value="×" class="btn" title="mul">
      <input type="button" value="÷" class="btn" title="divi">
    </p>
  </div>
</body>
</html>
<script src="./js/jsq.js"></script>

var box = document.getElementById("box");
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var fuhao = document.getElementById("fuhao");
var jieguo = document.getElementById("jieguo");
var btn = box.querySelectorAll(".btn");

for(var i=0;i<btn.length;i++){
  btn[i].onclick = function(){
    switch(this.title){
      case "add" : add(); break;
      case "sub" : sub(); break;
      case "mul" : mul(); break;
      case "divi" : divi(); break;
    }
  }

}
function add(){
  fuhao.innerHTML = "+";
 jieguo.innerHTML = +num1.value + +num2.value;
}
function sub(){
  fuhao.innerHTML = "-";
  jieguo.innerHTML = num1.value - num2.value;
}
function mul(){
  fuhao.innerHTML = "×";
  jieguo.innerHTML = num1.value * num2.value;
}
function divi(){
  fuhao.innerHTML = "÷";
  jieguo.innerHTML = num1.value / num2.value;
}