一言+逐字出现特效

1.逐字显示文字

1. 步骤
   • 准备一段文字放在string容器中，并隐藏string容器
   • 一个一个读取string容器中的内容，显示到showStr1容器中
   • 用定时器逐字显示
2. 效果
   
3. 源码：

   <h>用来显示逐渐出现的文字</h>
     <p id="showStr1"></p> 
   <div style="display:none" id="string">helloworld </div>
   <script>
     var index = 0;
     var str = document.getElementById("string").innerHTML;
     function type() {
     if(index == str.length) {
         index = 0;
       }
       document.getElementById("showStr1").innerText = str.substring(0, index++);
     }
     setInterval(type, 200); //通过定时器来让文字逐步显示
   </script>
   

2.一言推送

结合一言api接口，推送文字到string容器

1. 效果：
   
2. 源码：

   <!-- 一言 -->
     <script type="text/javascript" src="https://api.imjad.cn/hitokoto/?cat=&charset=utf-8&length=&encode=js&fun=sync&source="></script>
     <div style="display:none" id="hitokoto"><script>hitokoto()</script>
     </div>
     <script>
         var index = 0;
         var str = document.getElementById("hitokoto").innerText;
         str = str.substring(10, str.length)//裁剪hitokoto()字样
         function type() {
           if(index == str.length) {
               index = 0;
             }
             document.getElementById("showStr").innerText = str.substring(0, index++);
         }
         setInterval(type, 200); //通过定时器来让文字逐步显示
     </script>
   

3. 将showStr放在你想展示的位置即可；
   如果要改变样式，修改showStr容器style。