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