简易计算器制作+优化过程

🤪碎碎念

其实学了蛮久 js 的，但是一直没有尝试过用 js 去动手写一些小东西。
碰巧在某个学习平台看到了计算器的制作，顺手记录一下。

📃正文

简单到令人发指的初始简陋版本👇

忘记粘源码了，第一部分全是图片真的很搞笑。

js 代码也是一样的粗糙随意。

效果演示：

然后就是对 js 代码的优化。

将重复代码抽出来包装成为独立的函数。
将四个事件绑定集合到一个循环内完成。

顺便，我可真是个手误小能手。

💻美化版计算器(以下才是正文系列)

首先是 html 和 css 部分，差不多是照搬。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>./简易计算器</title>
  </head>
  <body>
    <h1>HTML, CSS, JavaScript 计算器</h1>
    <form>
      <input type="button" id="clear" class="btn other" value="C">
      <input type="button" id="delete" class="btn other" value="D">
      <input type="text" id="display">
      <br>
      <input type="button" class="btn number toget" value="7">
      <input type="button" class="btn number toget" value="8">
      <input type="button" class="btn number toget" value="9">
      <input type="button" class="btn operator toget" value="+">
      <br>
      <input type="button" class="btn number toget" value="4">
      <input type="button" class="btn number toget" value="5">
      <input type="button" class="btn number toget" value="6">
      <input type="button" class="btn operator toget" value="*">
      <br>
      <input type="button" class="btn number toget" value="1">
      <input type="button" class="btn number toget" value="2">
      <input type="button" class="btn number toget" value="3">
      <input type="button" class="btn operator toget" value="-">
      <br>
      <input type="button" class="btn number toget" value="0">
      <input type="button" class="btn operator toget" value=".">
      <input type="button" class="btn operator toget" value="/">
      <input type="button" id="cal" class="btn other" value="=">
    </form>
    <p id="time" style="text-align:center"></p>
    <script src="./js/./简易计算器.js"></script>
  </body>
</html>

*{
  border: none;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}
h1{
  color: #495678;
  font-size: 30px;
  margin-top: 20px;
  padding-top: 50px;
  display: block;
  text-align: center;
  text-decoration: none;
}
form{
  background-color: #495678;
  box-shadow: 4px 4px #3d4a65;
  margin: 40px auto;
  padding: 40px 0 30px 40px;
  width: 280px;
}
.btn {
  outline: none;
  cursor: pointer;
  font-size: 20px;
  height: 45px;
  margin: 5px 0 5px 10px;
  width: 45px;
}
.btn:first-child {
  margin: 5px 0 5px 10px;
}
.btn, #display, form {
  border-radius: 25px;
}
#display {
  outline: none;
  background-color: #98d1dc;
  box-shadow: inset 6px 6px 0px #3facc0;
  color: #dededc;
  font-size: 20px;
  height: 47px;
  text-align: right;
  width: 115px;
  padding-right: 10px;
  margin-left: 5px;
}
.number {
  background-color: #72778b;
  box-shadow: 0 5px #5f6680;
  color: #dededc;
}
.number:active {
  box-shadow: 0 2px #5f6680;
}
.operator {
  background: #dededc;
  box-shadow: 0 5px #bebebe;
  color: #72778b;
}
.operator:active {
  box-shadow: 0 2px #bebebe;
}
.other {
  background-color: #e3844c;
  box-shadow: 0 5px #e76a3d;
  color: #dededc;
}
.other:active {
  box-shadow: 0 2px #e76a3d;
}

样式图：

然后先是简单粗暴的 js 代码：

//display框显示更改。
function get(num){
  var shownums = document.getElementById("display");
  shownums.value+=num;
}
//清空显示函数
function clear(){
  var shownums = document.getElementById("display");
  shownums.value="";
}
//删除一个输入函数
function backspace(){
  var shownums = document.getElementById("display");
  shownums.value=shownums.value.substring(0,shownums.value.length-1);
}
//为所有 num 和 operator 的 button 添加点击监听事件
var Btns = document.getElementsByClassName("toget")
for(var i=0;i<Btns.length;i++){
  Btns[i].onclick=function(){
    get(this.value);
  }
}

首先是前面几个显示部分的函数，都很简单。不过我发现我老是忘记字符串是无法更改的，而且记不清数组和字符串各自的方法。

//找到清除按钮绑定点击监听事件
var clearBtn = document.getElementById("clear");
clearBtn.onclick=clear;
//删除一个输入的绑定监听
var deleteBtn = document.getElementById("delete");
deleteBtn.onclick=backspace;
//计算结果的点击绑定监听
var re = document.getElementById("cal");
function calculates(){
  var result=0;
  result = document.getElementById("display").value;
  document.getElementById("display").value=eval(result);
}
re.onclick=calculates;

然后到了这里，写着写着懵了一下。本来以为要摩拳擦掌自己写计算的函数，怎么怎么取符号，结果直接一个 eval 函数砸了上来。 emmmmm，我一定是沉浸在写 C 的时候，很多东西都是自己动手去写。现在写别的语言，有了很多内置的函数很方便，但是我总不记得。

//时间展示
function showTime(){
  var today = new Date();
  var y = today.getFullYear();
  var M = today.getMonth()+1;
  var d = today.getDate();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m=checkTime(m);
  s=checkTime(s);
  var week=today.getDay();
  var w = new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
  document.getElementById("time").innerHTML=y+"年"+M+"月"+d+"日"+"</br>"+h+":"+m+":"+s+" "+w[week];
  setTimeout("showTime()",1000);
}
function checkTime(i){
  if(i<10){
    i="0"+i;
  }
  return i;
}
window.onload = function(){
  showTime();
}

然后是一个时间展示，这不禁让我想起了上周遇到的坑。
input 中 type 为 date 的那个元素 value 值的接收是有格式要求的，比如日的数字就要求是两位数。

我写了一个自动获取当天日期的函数，在我自己测试的时候，是在二十几号，都没有出现过问题。别人在四五号的时候一测，就遇到 bug 了。😂

💡总结

一个简单的计算器就差不多是这样了。写完一看好像也没有什么特别的东西……唯一记得的大概是这个计算器的样式很好看， eval 让我眼前一亮(?)

顺便记一下，要去了解一下 setTimeout 和 setInterval 的异同。

2020 年回顾

仔细又看了一下这个例子，其实重点在于获取 dom 元素以及值。对于我来说，也许还有页面的样式和布局。

那个时候还是很难接受一个语言内置一大堆的函数和方法，因为我那时候觉得记下来很难，现在却好像已经习惯了许多。