标签 javascript html css loops
<分区>
我想弄清楚如何让打字机以微妙的延迟无限循环。目前，它仅在页面加载时触发。
<!DOCTYPE html>
<html>
<body>
<h1>Typewriter</h1>
<p id="demo"></p>
<script>
var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
window.onload = typeWriter;
</script>
</body>
</html>
最佳答案
使用 setTimeout:在开头将段落重置回 ""。当循环内达到文本长度时，将 i 重置为 0。如果是最后一个字符，要添加延迟，只需使用不同的速度即可。
但是，最好在您的情况下使用 setInterval，下面是一个示例:
<h1>Typewriter</h1>
<p id="demo"></p>
<script>
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
var elem = document.getElementById('demo');
function typeWriter() {
var i = 0;
elem.textContent = "";
var interval = setInterval(function(){
elem.textContent += txt[i];
i++;
if (i === txt.length) {
clearInterval(interval);
setTimeout(typeWriter, 3000);
}
}, speed)
}
window.onload = typeWriter;
</script>正如@Scott Marcus 在评论中建议的那样，当您仅更改文本时，请使用 textContent 而不是 innerHTML。
关于javascript - 如何让打字机循环？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72382326/
相关文章：
javascript - 我的导航栏在 Microsoft Edge 中工作，但在 Chrome 中效果不佳
javascript - 使用更少的代码来隐藏和显示选择菜单内容的更好方法是什么？ javascript
javascript - javascript 可以同时用于两个按钮吗？
javascript - 如何在 JavaScript 中创建对象/数组？
javascript - JS setTimeout() 函数
jquery - 相同的源代码 - 不同的浏览器 - jQuery 插件适用于 Firefox 和 Chrome，不适用于 IE 9