学习目标：
提示：这里可以添加学习目标
例如：
- 一周掌握 Java 入门知识
学习内容：
- 掌握延时函数的使用
- 掌握JavaScript控制css属性的方法
学习：
提示：这里可以添加计划学习的时间
例如：
- 框架 + 文字
<!DOCTYPE html> <html lang="zH-Hans">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>消失的文字</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="box"> <div class="one">好雨知时节，当春乃发生1</div> <div class="twe">随风潜入夜，润物细无声2 </div> <div class="three">野径云俱黑，江船火独明3</div> <div class="four">晓看红湿处，花重锦官城4</div> </div> </body> </html> - CSS代码
.box{
text-align: center; /* 设置容器居中对齐 */ margin-top: 20%; /* 设置顶部外边距为父容器高度的20% */ font-size: 30px; /* 设置字体大小为30像素 */ display:none;/* 隐藏区域*/ } - 获取元素 + 每两秒显示文字
<script> const msg1 = document.querySelector('.one') const msg2 = document.querySelector('.twe') const msg3 = document.querySelector('.three') const msg4 = document.querySelector('.four') setTimeout(function () { /*设置延时函数setTimeout，实现每隔2秒钟，一条一条的把上面文字呈现出来*/ msg1.style.display = 'block' /*文字显示*/ msg1.style.color = 'blue' /*文字颜色*/ msg1.style.textShadow = '2px 2px 5px rgb(0, 0, 0)' /*文字阴影*/ }, 2000) /*第二秒时显示*/ setTimeout(function () { msg1.style.display = 'none' /*第一段文字隐藏*/ msg2.style.display = 'block' /*第二段文字显示*/ msg2.style.color = 'red' /*文字颜色*/ msg2.style.textShadow = '2px 2px 5px rgb(0, 0, 0)' /*文字阴影*/ }, 4000) /*第四秒时显示*/ setTimeout(function () { msg2.style.display = 'none' /*第二段文字隐藏*/ msg3.style.display = 'block' /*第三段文字显示*/ msg3.style.color = 'pink' /*文字颜色*/ msg3.style.textShadow = '2px 2px 5px rgb(0, 0, 0)' /*文字阴影*/ }, 6000) /*第六秒显示*/ setTimeout(function () { msg3.style.display = 'none' /*第三段文字隐藏*/ msg4.style.display = 'block' /*第四段文字显示*/ msg4.style.color = 'green' /*文字颜色*/ msg4.style.textShadow = '2px 2px 5px rgb(0, 0, 0)' /*文字阴影*/ }, 6000) /*第八秒显示* </script>