Js实现简单的动态打字功能

布满荆棘的人生 2022-05-14 15:50 320阅读 0赞 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>WriteFont</title>
  6. </head>
  7. <body>
  8.     <div id="divTyping"></div>
  10.     <script type="text/javascript">
  11.             var str = '<big>我现在根本不想上什么晚课,<br><br>只想早点为祖国庆生！'
  12.             var i = 0;
  13.             function typing() {
  14.                 var divTyping = document.getElementById('divTyping');
  15.                 if(i <= str.length){
  16.                     divTyping.innerHTML = str.slice(0, i++) + "_";
  17.                     setTimeout('typing()', 300);//每2s调用一次typing()
  18.                 }
  19.                 else {
  20.                     divTyping.innerHTML = str;//结束打字，移除_光标
  21.                 }
  22.             }
  23.             typing();
  24.     </script>
  25. </body>
  26. </html>

效果图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_27_color_FFFFFF_t_70

发表评论

表情：
评论列表 （有 0 条评论，320人围观）

还没有评论，来说两句吧...

相关阅读

    相关 C语言实现简单打字游戏

    我们实现这样一道编程题，简单的打字游戏，在程序启动后，随机生成一段英文字母，然后用户输入英文字母，输入完毕后，显示用户打字时间和正确率。 代码如下： define

    旧城等待，旧城等待，/ 0 赞/ 589 阅读