JS 操纵 DOM 的简单案例 , 仿照前端小课的第四天内容 , 添加了一些注释
<!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>
<!-- 创建这个 contentDiv 的目的就是为了让添加的 div 能有一个容器: -->
<div id="content"></div>
<div class="btn" onclick="addSlogan()">按 钮</div>
<script>
const titles = [
'欢迎来到王者荣耀！',
'敌军还有 5 秒到达战场！',
'全军出击!',
'新年快乐!',
'I will carry you!'
];
const addSlogan = function () {
// floor: 返回小于或等于其数字参数的最大整数 , 保证数组不越界:
let index = Math.floor(Math.random() * titles.length);
let div = document.createElement("div");
// 这里是从 titles 数组里获取任意 index 位置的一个字符串:
let textNode = document.createTextNode(titles[index]);
// 把这段textNode追加到div 标签里作为 div 标签的标签内容:
div.appendChild(textNode);
// 设置文字颜色:
div.style.color = "#FE4235";
// 设置背景颜色:
div.style.backgroundColor = "#345678";
// 设置行高:
div.style.lineHeight = 2;
// 文字居中:
div.style.textAlign = "center";
// 最后把新创建并且设置好的div 放到 class = "content" 的这个容器 div 里:(把创建好的 div 放在 contentDiv 里面作为其子节点使用)
document.getElementById('content').appendChild(div);
};
</script>
</body>
</html>
