利用原生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>