提示信息

js 模拟打字效果,一个字一个字出来 ,写一个方法

为爱之名 已关注

这是一个使用JavaScript创建模拟打字效果的简单函数:

  1. function typeEffect(element, speed) {
  2. let text = element.innerHTML;
  3. element.innerHTML = "";
  4. let i = 0;
  5. let timer = setInterval(function() {
  6. if (i < text.length) {
  7. element.append(text.charAt(i));
  8. i++;
  9. } else {
  10. clearInterval(timer);
  11. }
  12. }, speed);
  13. }
  14. // 使用方式:
  15. let el = document.getElementById('yourElementID'); // 更换为你的元素ID
  16. typeEffect(el, 100); // 第二个参数100代表每个字符打出的速度,以毫秒计

在上面的代码中,typeEffect 函数接受两个参数:一个HTML元素和字符显示的速度(以毫秒为单位)。函数首先保存了元素原始的文本内容,然后清空该元素。然后设置一个定时器,在设定的速度间隔后逐个添加字符到元素中。当所有字符都已经被添加之后,定时器就会被清除。

注意:这个脚本假定你要执行打字效果的元素已经包含了完整的文本。

    遇到难题? "AI大模型GPT4.0、GPT" 是你的私人解答专家! 点击按钮去提问......
为爱之名 关注 已关注

最近一次登录:2024-03-27 14:59:12   

暂时还没有签名,请关注我或评论我的文章
×
免费图表工具,画流程图、架构图