JS 操縱 DOM 的簡單案例 , 仿照前端小課的第四天內(nèi)容 , 添加了一些注釋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>歡迎來到王者榮耀!</title>
<style>
body {
background-color: #2A3980;
}
.btn {
border: 1px solid white;
text-align: center;
padding: 10px;
margin: 50px;
border-radius: 5px;
background-color: #098763;
color: white;
font-weight: bolder;
}
.title {
text-align: center;
color: white;
}
#content {
margin: 50px;
background-color: white;
padding: 10px;
}
</style>
</head>
<body>
<h1 class="title">給我沖鴨!</h1>
<!-- 創(chuàng)建這個 contentDiv 的目的就是為了讓添加的 div 能有一個容器: -->
<div id="content"></div>
<div class="btn" onclick="addSlogan()">按 鈕</div>
<script>
const titles = [
'歡迎來到王者榮耀！',
'敵軍還有 5 秒到達戰(zhàn)場！',
'全軍出擊!',
'新年快樂!',
'I will carry you!'
];
const addSlogan = function () {
// floor: 返回小于或等于其數(shù)字參數(shù)的最大整數(shù) , 保證數(shù)組不越界:
let index = Math.floor(Math.random() * titles.length);
let div = document.createElement("div");
// 這里是從 titles 數(shù)組里獲取任意 index 位置的一個字符串:
let textNode = document.createTextNode(titles[index]);
// 把這段textNode追加到div 標(biāo)簽里作為 div 標(biāo)簽的標(biāo)簽內(nèi)容:
div.appendChild(textNode);
// 設(shè)置文字顏色:
div.style.color = "#FE4235";
// 設(shè)置背景顏色:
div.style.backgroundColor = "#345678";
// 設(shè)置行高:
div.style.lineHeight = 2;
// 文字居中:
div.style.textAlign = "center";
// 最后把新創(chuàng)建并且設(shè)置好的div 放到 class = "content" 的這個容器 div 里:(把創(chuàng)建好的 div 放在 contentDiv 里面作為其子節(jié)點使用)
document.getElementById('content').appendChild(div);
};
</script>
</body>
</html>
