javascript 打字效果的文字特效

      2020-04-06 02:48      编程语言
文字如何实现打字的效果呢?在浏览网页的时候也经常能看到这种效果。本节给出了一个打字效果的文字特效,文字一个一个地打印在页面上。本节代码主要使用了 onMousedown 事件和 event.button 属性,主要功能和用法如下。
  • setTimeout 方法,在执行时是在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
  • charAt 方法返回一个字符值,该字符位于指定索引位置。字符串中的第一个字符的索引为0,第二个的索引为1,等等。超出有效范围的索引值返回空字符串。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
运行该程序后,页面出现一个提示信息,然后逐个出现字符。如此逐个出现字符后,等待全部打印完毕即可停止打印。

源程序解读
  (1)程序首先建立了一个层,其 ID 为 ttl0,便于以后调用。这个层用来显示打印的文字。
  (2)程序在<body>元素上添加 onLoad 事件,当整个页面载入完成以后,该事件被触发,调用 init() 事件处理函数,对该事件进行处理。
  (3)在函数 txtTyper() 中,使用 charAt 方法得到字符串中的某个字符。使用 if 条件语句判断该字符是否满足尽头。满足条件后打印在页面上。
  (4)在 if 语句中,也可使用任意合法的 JavaScript 语句,完成更为复杂的操作。