利用原生JS写简单计算器
利用原生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>
* {
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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
