js 模拟打字效果,一个字一个字出来 ,写一个方法
这是一个使用JavaScript创建模拟打字效果的简单函数:
function typeEffect(element, speed) {
let text = element.innerHTML;
element.innerHTML = "";
let i = 0;
let timer = setInterval(function() {
if (i < text.length) {
element.append(text.charAt(i));
i++;
} else {
clearInterval(timer);
}
}, speed);
}
// 使用方式:
let el = document.getElementById('yourElementID'); // 更换为你的元素ID
typeEffect(el, 100); // 第二个参数100代表每个字符打出的速度,以毫秒计
在上面的代码中,typeEffect
函数接受两个参数:一个HTML元素和字符显示的速度(以毫秒为单位)。函数首先保存了元素原始的文本内容,然后清空该元素。然后设置一个定时器,在设定的速度间隔后逐个添加字符到元素中。当所有字符都已经被添加之后,定时器就会被清除。
注意:这个脚本假定你要执行打字效果的元素已经包含了完整的文本。