利用原生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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/160570.html
標籤：其他
下一篇：一篇文章帶你實操代碼理解盒子模型