HTML实现自动打字

代码前景

最近看到很多网站,包括是博客网站也好,腾讯云网站也好,都上架了很多漂亮的封面,在封面上面总会有一些字体会自动打出,显得网站非常高级,非常好看,我也是爬出源码仔细的研究了一下,虽然说源码非常简单,但是还是希望大家可以耐心把文章看完

HTML代码

<body>

<div id='divTyping'></div>

  <script>

   var str = '<big>其实我喜欢会撒娇的男生,不会抽烟喝酒乱勾搭的男生,会画画的男生,篮球打的厉害的男生,还有会做饭的男生,可是如果是你的话,什么都不会也可以。<br>青梅竹马不是你,情窦初开不是你,只愿细水长流是你,柴米油盐是你,白首也是你。<br>小洛天整理</big>';

   var i = 0;

   function typing(){

    var divTyping = document.getElementById('divTyping');

    if (i <= str.length) {

     divTyping.innerHTML = str.slice(0, i++) + '_';

     setTimeout('typing()', 200);//递归调用

    }

    else{

     divTyping.innerHTML = str;//结束打字,移除 _ 光标

    }

   }

   typing();

  </script>

 </body>

</html>
© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情

    暂无评论内容