第二节 消失的留言
一、需求分析
消失的留言，每隔一秒显示一句话。
图 7-2 消失的留言
二、操作步骤
（一）初始化HTML基础框架
使用!DOCTYPE html声明文档类型，并通过html:5的快捷代码创建HTML5的基础结构，然后设置语言和标题。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>消失的留言</title>
</head>
<body>
</body>
</html>
（二）构建文字模块
添加需要操作的文字，并设置文字显示位置。
<div class="container">
<div class="caption">好戏即将开始</div>
<div class="caption1">时光，浓淡相宜；人心，远近相安。流年，长短皆逝；浮生，往来皆客。</div>
<div class="caption2">不必行色匆匆，不必光芒四射，不必成为别人，只需做自己。</div>
<div class="caption3">青山有花开，绯雪重峦，滴滴胭脂泪。</div>
<div class="caption4">青山有花谢，细条空垂，枝枝亡人归。</div>
<div class="caption5">我曾以为形同陌路，是我们之间无解的结局。</div>
<div class="caption6">但邀天之幸，待我回首望去，你还愿在这里。</div>
<div class="caption7">愿我们能以蓦然一眼为始，以相伴一生为终。</div>
<div class="caption8">完</div>
</div>
css代码
body{
margin: 0;
}
.container { /* 定义一个样式类名为.container的容器 */
font-size: 30px; /* 设置字体大小为30px */
display: flex; /* 使用弹性布局（Flexbox） */
justify-content: center; /* 水平居中对齐子元素 */
align-items: center; /* 垂直居中对齐子元素 */
min-height: 100vh; /* 设置最小高度为视窗高度的100% */
cursor: pointer; /* 设置鼠标悬停在元素上时的光标样式为小手形状，表明该元素可点击 */
caret-color: transparent; /* 将插入光标颜色设置为透明，使其在聚焦时不可见 */
padding: 0 15px; /* 手机端的时候左右有空隙 */
}
（三）获取获取元素
通过JavaScript代码获取到每段文字的元素。
const caption = document.querySelector('.caption')
const caption1 = document.querySelector('.caption1')
const caption2 = document.querySelector('.caption2')
const caption3 = document.querySelector('.caption3')
const caption4 = document.querySelector('.caption4')
const caption5 = document.querySelector('.caption5')
const caption6 = document.querySelector('.caption6')
const caption7 = document.querySelector('.caption7')
const caption8 = document.querySelector('.caption8')
（四）默认隐藏所有文字元素
通过JavaScript代码，让对应元素模块的css属性添加一条隐藏属性。
caption1.style.display = 'none'
caption2.style.display = 'none'
caption3.style.display = 'none'
caption4.style.display = 'none'
caption5.style.display = 'none'
caption6.style.display = 'none'
caption7.style.display = 'none'
caption8.style.display = 'none'
（五）每隔3秒显示一条文字
通过设置延时函数setTimeout，实现每隔3秒钟，一条一条的把上面文字呈现出来，并通过style给文字添加其他绚丽的css属性。
// 设置一个定时器，3秒后将caption1的样式改为显示，颜色为#3399cc，文字阴影为2px 2px 5px rgb(0, 0, 0)
setTimeout(function () {
caption.style.display = 'none'
caption1.style.display = 'block'
caption1.style.color = '#3399cc'
caption1.style.textShadow = '2px 2px 5px rgb(0, 0, 0)'
}, 3000)
// 设置一个定时器，6秒后将caption1的样式改为隐藏，caption2的样式改为显示，颜色为blue，文字阴影为2px 2px 5px rgb(107, 212, 154)
setTimeout(function () {
caption1.style.display = 'none'
caption2.style.display = 'block'
caption2.style.color = 'blue'
caption2.style.textShadow = '2px 2px 5px rgb(107, 212, 154)'
}, 6000)
// 设置一个定时器，9秒后将caption2的样式改为隐藏，caption3的样式改为显示，颜色为aqua，文字阴影为2px 2px 5px rgb(7, 34, 122)
setTimeout(function () {
caption2.style.display = 'none'
caption3.style.display = 'block'
caption3.style.color = 'aqua'
caption3.style.textShadow = '2px 2px 5px rgb(7, 34, 122)'
}, 9000)
// 设置一个定时器，12秒后将caption3的样式改为隐藏，caption4的样式改为显示，颜色为blueviolet，文字阴影为2px 2px 5px rgb(77, 5, 80)
setTimeout(function () {
caption3.style.display = 'none'
caption4.style.display = 'block'
caption4.style.color = 'blueviolet'
caption4.style.textShadow = '2px 2px 5px rgb(77, 5, 80)'
}, 12000)
// 设置一个定时器，15秒后将caption4的样式改为隐藏，caption5的样式改为显示，颜色为chartreuse，文字阴影为2px 2px 5px rgb(0, 0, 0)
setTimeout(function () {
caption4.style.display = 'none'
caption5.style.display = 'block'
caption5.style.color = 'chartreuse'
caption5.style.textShadow = '2px 2px 5px rgb(0, 0, 0)'
}, 15000)
// 设置一个定时器，18秒后将caption5的样式改为隐藏，caption6的样式改为显示，颜色为红色，文字阴影为2px 2px 5px rgb(7, 34, 122)
setTimeout(function () {
caption5.style.display = 'none'
caption6.style.display = 'block'
caption6.style.color = '#ff0000'
caption6.style.textShadow = '2px 2px 5px rgb(7, 34, 122)'
}, 18000)
// 设置一个定时器，21秒后将caption6的样式改为隐藏，caption7的样式改为显示，颜色为blanchedalmond，文字阴影为2px 2px 5px rgb(102, 4, 4)
setTimeout(function () {
caption6.style.display = 'none'
caption7.style.display = 'block'
caption7.style.color = 'blanchedalmond'
caption7.style.textShadow = '2px 2px 5px rgb(102, 4, 4)'
}, 21000)
// 设置一个定时器，23秒后将caption7的样式改为隐藏
setTimeout(function () {
caption7.style.display = 'none'
caption8.style.display = 'block'
}, 23000)