用html+js ，制作一个页面：每隔一秒显示一句话。-HQY 一个和谐有爱的空间

21

2024
04
14:25:25

用html+js ，制作一个页面：每隔一秒显示一句话。

知识点总结：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)

推荐本站淘宝优惠价购买喜欢的宝贝: