一言+逐字出現特效

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。