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

最新推荐文章于 2024-03-05 12:15:00 发布

mediumwave120

最新推荐文章于 2024-03-05 12:15:00 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/mediumwave120/article/details/79416460

版权

<!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.οnlοad=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>

mediumwave120

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js实现逐字在网页上打印文字

&lt;!DOCTYPE html&gt;&lt;head&gt; &lt;title&gt;Js实现逐字在网页上打印文字&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; .result{ margin: 100px auto; font-size: 30p
复制链接

扫一扫