纯 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; } }
匿名
2025-10-22
盖楼盖楼！
匿名
2025-08-11
沙发沙发
匿名
2025-08-10
https://at.oiik.cn/bing.html
匿名
2025-02-21
实用，我在开发https://minmail.app/时候使用到了
王飞翔
2024-12-30
亲爱的朋友：您好！中国疫情持续蔓延，很多人症状非常严重持久不愈，医院人满为患，各年龄段随地倒猝死的现象暴增，多省感染手足口、甲流、乙流、支原体、合胞及腺病毒的儿童不断攀升，目前各种天灾人祸，天气异象频发。古今中外的很多预言都说了这几年人类有大灾难，如刘伯温在预言中说 “贫者一万留一千，富者一万留二三”,“贫富若不回心转，看看死期到眼前”, 预言中也告诉世人如何逃离劫难的方法，真心希望您能躲过末劫中的劫难，有个美好的未来，请您务必打开下方网址认真了解，内有躲避瘟疫保平安的方法。网址1：https://github.com/1992513/www/blob/master/README.md?abhgc#1 网址2：bitly.net/55bbbb 网址3：https://d3ankibxiji86m.cloudfront.net/30gj 如打不开请多换几个浏览器试
匿名
2024-12-12
Backdata 搜索引擎网址提交入口：https://backdata.net/submit-site.html