案例模仿:链接: https://mp.weixin.qq.com/s/u1z009G2lYZK-SGFCXJhyw
效果图
下面展示一些 Web代码
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fighting</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #293654;
}
h3 {
margin: 30px 0;
font-size: 20pxpx;
color: #fff;
text-align: center;
}
#content {
margin: 10px 0;
font-size: 8px;
color: #cb6a29;
text-align: center;
}
div {
text-align: center;
}
button {
width: 190px;
height: 40px;
margin: 30px 0;
background-color: #777aff;
border: 1px solid #fff;
border-radius: 4px;
color: #fff;
font-size: 8px;
}
</style>
</head>
<body>
<h3>给自己一句鼓励的话</h3>
<div id="content"></div>
<div>
<button class="button" onclick="addText()">鼓励自己一下</button>
</div>
<script>
let titles = [
'目前是学习前端小课的第二天,要加油啊!',
'你是最棒哒!',
'待你学成归来,就是繁华盛开之日!',
'哪怕是枯燥的过程也要好好享受!'
];
let addText = function () {
let index = Math.floor(Math.random() * titles.length + 0);
let div = document.createElement("div");
let textNode = document.createTextNode(titles[index]);
div.appendChild(textNode); //先把文本给div元素
div.style.lineHeight = 2; //让div有换行效果
let contentDiv = document.getElementById('content');
//把div元素添加至id为content的节点中
contentDiv.appendChild(div);
}
</script>
</body>
</html>