使用JS达到HTML页面动态展示文字的效果_html页面 在HTML页面上实现一行文字动态展示，要求：文字逐渐出现，全部文字出现后，重新从头开始，不断重复。

1.效果图展示

在HTML页面上实现一行文字动态展示，要求：文字逐渐出现，全部文字出现后，重新从头开始，不断重复。

使用JS达到HTML页面动态展示文字的效果_html页面_02

2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
      var msg = "学如逆水行舟，不进则退；心似平原纵马，易放难收";
      var i = 0;
      function play(){
          if(i <= msg.length){
              var text = document.getElementsByClassName("text")[0];
              text.innerText = msg.substring(0, i);
              setTimeout("play()", 200);
              i++;
          }else {
              i = 0;
              console.clear();
              console.log("一次轮播结束，新一次轮播开始。");
              setTimeout("play()", 1000);
          }
      }
  </script>
</head>
<body onLoad="play()">
<div style="margin: 200px auto; text-align: center;">
  <h1 class="text"></h1>
</div>
</body>
</html>

3.进阶

从其它的元素（比如input输入框）中获取字符串，在网页上输出。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onLoad="play()">
<input type="hidden" id="myText" value="学如逆水行舟，不进则退；心似平原纵马，易放难收">
<div style="margin: 200px auto; text-align: center;">
  <h1 class="text"></h1>
</div>
</body>
<script>
  var msg = document.getElementById("myText").value;
  var i = 0;
  console.log(msg.length);
  function play(){
    if(i <= msg.length){
      var text = document.getElementsByClassName("text")[0];
      text.innerText = msg.substring(0, i);
      setTimeout("play()", 200);
      i++;
    }else {
      i = 0;
      console.clear();
      console.log("一次轮播结束，新一次轮播开始。");
      setTimeout("play()", 1000);
    }
  }
</script>
</html>

注意：js脚本(script)中的内容必须放在最后，否则会出现错误（网页加载流程决定的）。

 4.总结

其实感觉还是挺简单的，就是不同函数的使用而已，但以前学的时候总觉得可难了，或许这就是难者不会，会者不难吧。

5.注意点

在使用 document.getElementById获取网页元素的时候，获取之后即可使用，因为id是唯一标识的，但在使用其他获取方式，比如getElementByClassName等方法获取元素的时候，因为获取到的是一个数组，所以需要指定是哪一个（如果只有一个也要用getElementByClassName[0]形式）之后再使用元素。