利用原生JS写简单计算器
利用原生JS来写一个简单的计算器，其中主要是对利用JS新建标签和鼠标事件的应用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>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
//建立一个数组用来盛放计算器按钮上显示的文字
var arr = [7, 8, 9, "/", 4, 5, 6, "*", 1, 2, 3, "-", "C", 0, "=", "+"];
//建立元素函数
function ce(type, style, props, parent) {
// 建立一个元素，这个元素的类型是type
var elem = document.createElement(type);
// 将style对象的全部属性复制到elem.style对象上
Object.assign(elem.style, style);
//用for循环将props这个对象中的全部属性复制到DOM对象上
for (var str in props) {
elem[str] = props[str];
}
// 若是给入了要放在谁的里面，将元素放在这个里面
if (parent) {
parent.appendChild(elem);
}
//返回建立好的元素
return elem;
}
// 引用建立元素函数，来建立一个最外层的内容为空的div
var div = ce(
"div",//建立元素为div
{//div1的样式
width: 416 + "px",
height: 620 + "px",
backgroundColor: "#c8c8c8",
margin: "20px auto",
overflow: "hidden"
},""//div的内容是空
,document.body//将建立好的div放入body中
);
// 引用建立元素函数，来建立一个在div中用来显示输入内容和结果的内容为空的div1
var div1 = ce(
"div",//建立元素为div
{//div1的样式
width: 362 + "px",
height: 120 + "px",
padding:"40px 25px",
backgroundColor: "#f3f3f3",
textAlign: "right",
margin: "2px 2px",
lineHeight: "120px",
fontSize: "80px"
},""//div1的内容是空
,div//将建立好的div1放入div中
);
// 利用forEach循环和引用元素建立函数来建立计算器的全部按钮
arr.forEach(function(item) {
var div2 = ce(
"div",//建立元素为div
{//div2的样式
width: 100 + "px",
height: 100 + "px",
backgroundColor: "#fbfbfb",
margin: "2px 2px",
float: "left",
fontSize: "50px",
textAlign: "center",
lineHeight: "100px"
},{ textContent: item }//div2的内容是数组arr的对应属性的属性值
,div//将建立好的div2们放入div中
);
});
// 执行init函数
init();
function init() {
// 获取当前全部的div
var divs = document.querySelectorAll("div");
// 将divs转换为数组，并将不是按钮的第0项和第1项从数组中删除
//目的是获得所有的按钮，最外层div和显示结果的div2在这里没有用因此删除它们
divs = Array.from(divs).splice(2, 16);
//打印获得的数组divs，检验是否正确获得了由所有按钮div2们组成的数组
console.log(divs);
//用forEach循环遍历数组
divs.forEach(function(item) {
//给数组中每一个div添加点击事件函数
item.addEventListener("click", clickHandler);
});
}
//新建空数组b
var b = [];
//新建空字符串c
var c = "";
// 新建空变量d
var d;
//点击事件函数
function clickHandler(e) {
//div1中累加显示点击的按钮
div1.textContent += this.textContent;
// 判断当点击的按钮不是"="时执行
if (this.textContent !== "=") {
//判断当点击的按钮不是"C"时执行
if (this.textContent !== "C") {
//将每次点击的按钮的值添加到数组b中
b[b.length] = this.textContent;
//将数组b转换为字符串
c = b.join("");
// 判断当字符串中含有"-"时执行
if (c.indexOf("-") != -1) {
//将字符串c以"-"为分隔符转换为数组d
d = c.split("-");
}
// 判断当字符串中含有"+"时执行
if (c.indexOf("+") != -1) {
//将字符串c以"+"为分隔符转换为数组d
d = c.split("+");
}
// 判断当字符串中含有"/"时执行
if (c.indexOf("/") != -1) {
//将字符串c以"/"为分隔符转换为数组d
d = c.split("/");
}
// 判断当字符串中含有"*"时执行
if (c.indexOf("*") != -1) {
//将字符串c以"*"为分隔符转换为数组d
d = c.split("*");
}
}
// 判断当点击的按钮是"C"时执行，用来清空以前全部操做
if (this.textContent === "C") {
//将数组b清空
b = [];
// 将字符串c清空
c = "";
//将以前变成数组的d清空
d = undefined;
// 将显示结果的div1的内容清空
div1.textContent = "";
}
}
// 判断当点击的按钮是"="时执行
if (this.textContent === "=") {
if (c.indexOf("-") != -1) {
//判断d的第0项是否为空，在运算负数减负数时会出现这种状况-3-2=-5（它的d为["","3","2"]
if(d[0]===""){
d[0]=-d[1]
d[1]=d[2]
}
//此时div1中显示的应该是减法运算的结果
//数组d中的第0项与第1项相减获得的结果显示在div1中
div1.textContent = d[0] - d[1];
b[0]=div1.textContent
b.length=1
// 打印b,c,d验证
//结果应为["第一次运算结果"] "第一个数-第二个数" ["第一个数","第二个数"]
console.log(b,c,d)
}
//当字符串c中包含"+"时执行
if (c.indexOf("+") != -1) {
//此时div1中显示的应该是加法运算的结果
//数组d中的第0项与第1项相加获得的结果显示在div1中
div1.textContent = Number(d[0]) + Number(d[1]);
//设置数组b的第0项属性值为当前运算结果
// 目的是为了接下来能够把这个结果当成下次运算时输入的第一个数进行运算，此时就实现了连续运算
b[0]=div1.textContent
// 将数组b长度改成1,目的是删除刚才第一次运算中输入的第二个数
b.length=1
// 打印b,c,d验证
//结果应为["第一次运算结果"] "第一个数+第二个数" ["第一个数","第二个数"]
console.log(b,c,d)
}
//当字符串c中包含"/"时执行
if (c.indexOf("/") != -1) {
//此时div1中显示的应该是除法运算的结果
//数组d中的第0项与第1项相除获得的结果显示在div1中
div1.textContent = d[0] / d[1];
b[0]=div1.textContent
b.length=1
// 打印b,c,d验证
//结果应为["第一次运算结果"] "第一个数/第二个数" ["第一个数","第二个数"]
console.log(b,c,d)
}
//当字符串c中包含"-"时执行
//当字符串c中包含"*"时执行
if (c.indexOf("*") != -1) {
//此时div1中显示的应该是乘法运算的结果
//数组d中的第0项与第1项相乘获得的结果显示在div1中
div1.textContent = d[0] * d[1];
b[0]=div1.textContent
b.length=1
// 打印b,c,d验证
//结果应为["第一次运算结果"] "第一个数*第二个数" ["第一个数","第二个数"]
console.log(b,c,d)
}
}
}
</script>
</body>
</html>