消失的留言
知识点总结：1、掌握延时函数的使用 2、掌握JavaScript控制css属性的方法。
功能介绍：每隔一秒显示一句话。
操作步骤
1、初始化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>
2、构建文字模块
添加需要操作的文字，并设置文字显示位置。
<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; //手机端的时候左右有空隙
}3、获取获取元素
通过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')4、默认隐藏所有文字元素
通过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'
5、每隔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'
caption666.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)6、完
效果演示
文档如有描述不清楚、错误或者过时的地方，欢迎留言指出。
文档、教程内容会不定时更新，转载请标明原帖链接，以免让过时的教程流入网络。
