欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

一言+逐字出现特效

程序员文章站 2022-06-04 17:06:49
...

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。
相关标签: # JavaScript