消失的留言（HTML中用JS实现）

最新推荐文章于 2024-10-31 20:26:57 发布

buzhidaozmx

最新推荐文章于 2024-10-31 20:26:57 发布

阅读量917

点赞数 14

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/buzhidaozmx/article/details/137043633

版权

本文介绍了如何在HTML和JavaScript中使用延时函数，控制CSS属性，实现一个文本逐行显示的效果，以帮助读者在一周内掌握基本的前端技能。

摘要由CSDN通过智能技术生成

学习目标：

提示：这里可以添加学习目标

例如：

提示：这里可以添加计划学习的时间

例如：

框架 + 文字

<!DOCTYPE html>

<head>

<title>消失的文字</title>

</head>

<body>

<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>