经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JS实战例子之实现自动打字机动效
来源:jb51  时间:2023/1/30 15:19:52  对本文有异议

前言

前几天遇到一个需求,产品告诉我说,希望这些字可以像自动打字那样,一个一个的出来,于是在完成需求的同时,顺便把这个方法记录出来,看大家是否也需要。

1、实现思路 

首先这个需求的目的是实现自动打字机效果,意思就是文字会一个一个出来,而且文字的最终显示提前已经固定,或者是已经获取完成了;

然后就需要每次将文字字符串拆开,每次比上一次多显示一个文字,并且清除掉上一次的显示;

每次累加要显示的文字,必定有个累加的过程,这里就需要用到递归显示,而递归的重要点在于阈值停止,所以累加的索引和字符串的长度应该有一个判断,以停止继续执行递归。

2、html布局和css样式

本功能并没有复杂的样式显示,所以布局只是用了一个div元素,而为了还原需求,将背景设置为黑底,文字设置为白色,更有一种自动打字机的科技感,代码如下:

  1. <div class="word"></div>
  2. <style>
  3. body {
  4. background: #000;
  5. }
  6. .word {
  7. margin: 100px;
  8. width: 500px;
  9. height: 30px;
  10. padding: 2px 10px;
  11. font-size: 26px;
  12. color: #FFF;
  13. font-weight: bold;
  14. }
  15. </style>

3、预定义前置变量 

需要预定义一个最终显示的字符串; 需要定义获取dom的变量;需要定义一个索引变量,用于不但累加计算;需要定义定时打字的变量,用于setTimeout的方法定义,以实现真实打字的场景特效;需要提前定义一个获取字符串长度的变量;需要定义每个阶段显示的字符串的变量;这里共定义了6个变量,代码如下:

  1. var wordStr = '2023年,喜迎新春,玉兔吉祥';
  2. var wordDom = document.querySelector('.word');
  3. var num = 0;
  4. var wordTimeout = null;
  5. var wLength = wordStr.length;
  6. var showWord = '';

4、动效过程解析

既然是模拟打字效果,咱们定义的字符串是“2023年,喜迎新春,玉兔吉祥”,所以显示过程肯定是:第一次显示“2”,第二次显示“20”,第三次显示“202”,以此类推,通过上一步预定义的num值累加,最终将字符串全部显示出来,所以第一步代码应该是:

  1. showWord += wordStr.charAt(num);
  2. wordDom.innerHTML = showWord;

此时num值为0,通过字符串的charAt获取固定索引的字符,也就是“2” ,但既然要模拟真实打字效果,打字都是需要时间的,所以,我们加上setTimeout函数,有个演示打字效果:

  1. wordTimeout = setTimeout(() => {
  2. showWord += wordStr.charAt(num);
  3. wordDom.innerHTML = showWord;
  4. }, 300)

而这只是第1个文字,想要实现不断累加,就得有个回调,用于源源不断的累加,计算,渲染显示:

  1. function autoWord() {
  2. wordTimeout = setTimeout(() => {
  3. showWord += wordStr.charAt(num);
  4. wordDom.innerHTML = showWord;
  5. num++;
  6. autoWord(); // 递归调用
  7. }, 300)
  8. }
  9. autoWord();

 而递归的重点在于源源不断,阈值而停

  1. if (num < wLength) {
  2. autoWord();
  3. } else {
  4. window.clearTimeout(wordTimeout);
  5. wordTimeout = null;
  6. }

5、完整源代码 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>自动打字机</title>
  6. <style>
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. }
  11. body {
  12. background: #000;
  13. }
  14. .word {
  15. margin: 100px;
  16. width: 500px;
  17. height: 30px;
  18. padding: 2px 10px;
  19. font-size: 26px;
  20. color: #FFF;
  21. font-weight: bold;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="word"></div>
  27. <script>
  28. var wordStr = '2023年,喜迎新春,玉兔吉祥';
  29. var wordDom = document.querySelector('.word');
  30. var num = 0;
  31. var wordTimeout = null;
  32. var wLength = wordStr.length;
  33. var showWord = '';
  34. function autoWord() {
  35. wordTimeout = setTimeout(() => {
  36. showWord += wordStr.charAt(num);
  37. wordDom.innerHTML = showWord;
  38. num++;
  39. if (num < wLength) {
  40. autoWord();
  41. } else {
  42. window.clearTimeout(wordTimeout);
  43. wordTimeout = null;
  44. }
  45. }, 300)
  46. }
  47. autoWord();
  48. </script>
  49. </body>

6、结语

我们一年又一年的生活着,很多时候觉得没有压力,甚至也不知道自己未来应该做点什么。就像这个递归函数,只是被一些人控制着,周而复始,我们甚至忘记了思考。

有时候需要一个阈值,停下来让我们想一想,可能你还是没有想到什么

到此这篇关于JS实战例子之实现自动打字机动效的文章就介绍到这了,更多相关JS自动打字机动效内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号