纯 JavaScript 逐字显示效果
纯 JavaScript 逐字显示效果（循环打字机效果）
通过 setInterval 实现逐字输出，支持动态速度控制
一次性打字机效果
js示例函数代码：
function typeWriter(text, elementId, speed = 100) { let i = 0; const container = document.getElementById(elementId); container.innerHTML = ""; const timer = setInterval(() => { if (i >= text.length) { clearInterval(timer); return; } container.innerHTML += text.charAt(i); i++; }, speed); } // 调用示例 typeWriter("欢迎访问本站！", "text-container");
循环打字机效果
js示例函数代码：
function typeWriter(text, elementId, speed = 100) {
let i = 0;
let isDeleting = false;
const container = document.getElementById(elementId);
let timer;
function startTyping() {
timer = setInterval(() => {
if (!isDeleting) {
// 打字阶段
if (i <= text.length) {
container.innerHTML = text.substring(0, i);
i++;
} else {
clearInterval(timer); // 清除打字定时器
isDeleting = true;
// 开启删除前等待1秒
setTimeout(() => startDeleting(), 3000);
}
}
}, speed);
}
function startDeleting() {
timer = setInterval(() => {
if (i > 0) {
container.innerHTML = text.substring(0, --i);
} else {
clearInterval(timer);
isDeleting = false;
typeWriter(text, elementId, speed); // 重新循环
}
}, speed / 2);
}
startTyping();
}
增强代码，代码添加了循环开关和删除文字开关
js示例代码：
function typeWriter(text, elementId, speed = 100, loop = true, del = true) {
let i = 0;
let isDeleting = false;
const container = document.getElementById(elementId);
let timer;
function startTyping() {
timer = setInterval(() => {
if (!isDeleting) {
if (i <= text.length) {
container.innerHTML = text.substring(0, i);
i++;
} else {
clearInterval(timer);
isDeleting = true;
setTimeout(() => startDeleting(), 3000); // 保持暂停逻辑
}
}
}, speed);
}
function startDeleting() {
timer = setInterval(() => {
if (i > 0) {
// 新增判断打完字后是否删除
if (loop || del) container.innerHTML = text.substring(0, --i);
} else {
clearInterval(timer);
isDeleting = false;
// 新增循环判断
if (loop) typeWriter(text, elementId, speed, loop); //
}
}, speed / 2);
}
startTyping();
}
// 调用示例
typeWriter("欢迎访问本站！", "textcenten");
<p class="typewriter" id="textcenten"></p>
光标动画增强
添加 CSS 光标闪烁效果：
.typewriter::after { content: "|"; animation: blink 1s infinite; } @keyframes blink { 50% { opacity: 0; } }
感谢分享 有用
发表评论