Js实现逐字在网页上打印文字

最新推荐文章于 2024-08-05 17:06:21 发布

原创最新推荐文章于 2024-08-05 17:06:21 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript实现的逐字打印效果，通过逐步显示字符串来模拟打字机的效果。该方法支持主流浏览器，包括IE8及以上版本、Google Chrome、Firefox、Opera和Safari。

部署运行你感兴趣的模型镜像

<!DOCTYPE html>
<head>
   <title>Js实现逐字在网页上打印文字</title>
   <meta charset="utf-8">
   <style>
      .result{
          margin: 100px auto;
          font-size: 30px;
          color:grey;
          text-align: center;
      }
      .resultType{
         font-size: 30px;
          color:#b47777;
          text-align: center;
      }
      p{
        margin: 100px auto;
        text-align: center;
        color:red;
      }
   </style>
   

</head>

<body>
<div class="result"></div>
<div class="resultType"></div>
<p>支持IE8+、Google、Firefox、Opera、Safari</p>
<script language="javascript">
    window.onload=function(){
        var result=document.querySelector('.result');
        var resultType=document.querySelector(".resultType");
        var t='我就是我,不一样的烟火！'
            result.innerHTML=t;
        function AddZero(n){
          if(n<10){
            return '0'+n;
          }
          return ''+n;
        }
        var i=1;
        function type(){
          var str  = t.substr(0,i);
          resultType.innerHTML = str + "_";
          i++;
            if (i>t.length){
               i=0;
               return ;
              //return 加入则text显示完后，停止
                str=i;
            }
          var t1=setTimeout(type,100);
        }
        type();
    }
  
</script>
</body>
</html>

您可能感兴趣的与本文相关的镜像

LobeChat

AI应用

LobeChat 是一个开源、高性能的聊天机器人框架。支持语音合成、多模态和可扩展插件系统。支持一键式免费部署私人ChatGPT/LLM 网络应用程序。