利用JavaScript实现打字机效果

2018年9月13日13:09:38 发表评论 815

效果预览

利用JavaScript实现打字机效果

相关代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .saying:after {
  6.   content: "|";
  7.   font-family: Arial, sans-serif;
  8.   font-size: 1.2em;
  9.   line-height: 0;
  10.   display: inline-block;
  11.   vertical-align: baseline;
  12.   opacity: 1;
  13.   animation: caret 500ms infinite;
  14. }
  15. </style>
  16. <script language="javascript">
  17. var index=0;
  18. var word;
  19. function type(){
  20.     var typePanel = document.getElementById("aa");
  21.     typePanel.innerText = word.substring(0,index++);
  22.     if(index % 3 == 0){
  23.         typePanel.className = "";
  24.     }else if(index % 3 == 1){
  25.         typePanel.className = "saying";
  26.     }
  27. }
  28. window.onload=function(){
  29.     word=document.getElementById("w").innerHTML;
  30.     setInterval(type, 200);
  31. }
  32. </script>
  33. <meta charset="utf-8">
  34. <title>javascript实现打字机效果</title>
  35. </head>
  36. <body>
  37. <pre id="aa" class="saying"></pre>
  38. <div style="display:none" id="w">
  39.     有一种累,叫胡思乱想!
  40.     一件小事,想太多了,既伤神又费力,
  41.     一件大事,想太多了,给自己增加压力,
  42.     一件好事,想太多了,就不再兴奋了,
  43.     一件坏事,想太多了,只会越来越焦虑。
  44.     放过自己吧,别再胡思乱想了,人之所以活的累,就是想的太多了。
  45. </div>
  46. </body>
  47. </html>

 

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: