Web入门：JavaScript文字动画

当前位置:

首页 > temp > JavaScript教程 >

Web入门：JavaScript文字动画

欢迎来的我的小院，恭喜你今天又要涨知识了！

案例内容

利用JavaScript实现文字逐步展现的动画效果。

演示

学习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>小院里的霍大侠</title>
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script>
    const containerEI=document.querySelector(".container");
    const careers=["跟着我","每天学习一点点","让你不再枯燥","不再孤单"];
    let careerIndex=0;
    let characterIndex=0;
    updateText();
    function updateText() {
      characterIndex++;
      containerEI.innerHTML=`
      <h1>欢迎来到我的小院${careers[careerIndex].slice(0,characterIndex)}</h1>
      `;
      if(characterIndex===careers[careerIndex].length){
        careerIndex++;
        characterIndex=0;
      }
      if(careerIndex===careers.length){
        careerIndex=0;
      }
      setTimeout(updateText,400);
    }
  </script>
  <style>
    body {
      margin: 0;
      display: flex;
      justify-content: center;
      height: 100vh;
      align-items: center;
      background-color: #fd946a;
      font-family: "Permanent Marker", cursive;
    }
  </style>
</html>

总结思考

学习点：
1、document.querySelector()返回container元素的信息
2、innerHTML：更改html元素的内容，可以设置或返回表格行的开始和结束标签之间的HTML
3、slice(参数1，参数2) :从已有的数组中返回选定的元素
参数1：从何处开始选取
参数2：从何处结束选取
4、setTimeout()：定时执行一个函数或指定的一段代码

使用JavaScript完成文字的逐步展现，可以做一个简短的动画，让界面更加生动有趣。

出处：https://www.cnblogs.com/xFeater/p/16951462.html

栏目列表