js实现简单的计算器

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

一、成果演示

JsDemo - 码上掘金 (juejin.cn)

二、相关描述

运用js运算符来制作一个简易的计算器，通过讲解来让大家认识一下计算器实现原理。

构建HTML的布局，先准备按钮标签备注好参数和运算符和结果的相关按键已及输出，大家可以使用一点布局进去这样会比较好看一点，但本人属实是css玩不好的，所以就简单布局一下，第二行代表参数一的input中的type="button" 标签为了实现可以选择的效果只需要改变将input中type里type类型该为"button"类型即可，而代表运算符的也是这样编写的里面包含加减乘除。参数二则是一个input的文本框为input 中是type="text"，计算的按钮则使用一个button按钮可以通过鼠标点击来进行运算，最后就是装计算结果的一个点击事件onclick="calculates()",讲结果放入到text的文本框，以及在输入的时候的相关数据和操作。

三、实例解析

方法解析

document.getElementById("display").value = eval(result);

eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。

实例执行原理解析：

document.getElementById("clear").addEventListener("click", function() {
            document.getElementById("display").value = "";
});

监听归零键的click操作，点击则归零键则执行代码把display输入框清空

function get(value) {
            document.getElementById("display").value += value; 
} 

每个键上onclick属性绑定函数get()，点击相应键则把相应键的值添加到display输入框中，直接做字符串的追加

function calculates() {
            var result = 0;
            result = document.getElementById("display").value;
            document.getElementById("display").value = "";
            document.getElementById("display").value = eval(result);
};

核心计算函数，首先获取输入框display的字符串，然后清空输入框，调用eval()函数计算表达式的值后再赋给输入框display，实现计算器的简易功能