Javascript 逐字显示文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7264974/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show text letter by letter
提问by hpique
What is the most elegant way of showing an html text letter by letter (like videogame captions) using CSS and JavaScript?
使用 CSS 和 JavaScript 逐字显示 html 文本（如视频游戏字幕）的最优雅方式是什么？
While I'm sure that his can be solved using a brute-force approach (say, splitting the characters and print them one by one using jQuery.append()), I'm hoping there's some CSS3 (pseudo-elements?) or JQuery magic to do this more elegantly.
虽然我确信可以使用蛮力方法解决他的问题（例如，拆分字符并使用 一个一个地打印它们jQuery.append()），但我希望有一些 CSS3（伪元素？）或 JQuery 魔法来做到这一点更优雅。
Extra points if the solution considers inner HTML content.
如果解决方案考虑内部 HTML 内容，则额外加分。
回答by armen.shimoon
HTML
HTML
<div id="msg"/>
Javascript
Javascript
var showText = function (target, message, index, interval) {
if (index < message.length) {
$(target).append(message[index++]);
setTimeout(function () { showText(target, message, index, interval); }, interval);
}
}
Call with:
致电：
$(function () {
showText("#msg", "Hello, World!", 0, 500);
});
回答by mrtsherman
If a smooth reveal is reasonable then I think this should be pretty straightforward. Untested, but this is how I imagine it would work
如果平滑显示是合理的，那么我认为这应该非常简单。未经测试，但这就是我想象的工作方式
html
html
<div id="text"><span>The intergalactic space agency</span></div>
css
css
div#text { width: 0px; height: 2em; white-space: nowrap; overflow: hidden; }
jQuery
jQuery
var spanWidth = $('#test span').width();
$('#text').animate( { width: spanWidth }, 1000 );
Okay, I couldn't resist and made a fiddle. One little code error that I fixed. Looks good to me though!
好吧，我无法抗拒并做了一个小提琴。我修复了一个小代码错误。不过对我来说看起来不错！
回答by BEAGM
100% vanilla javascript, strict mode, unobtrusive html,
100% vanilla javascript，严格模式，不显眼的 html，
function printLetterByLetter(destination, message, speed){
var i = 0;
var interval = setInterval(function(){
document.getElementById(destination).innerHTML += message.charAt(i);
i++;
if (i > message.length){
clearInterval(interval);
}
}, speed);
}
printLetterByLetter("someElement", "Hello world, bonjour le monde.", 100);
回答by Joseph Silber
You really should just append, or show/hide.
你真的应该只是append，或显示/隐藏。
However, if for some odd reason you don't want to alter your text, you can use this overly-complicated-for-no-good-reason piece of code:
但是，如果出于某种奇怪的原因您不想更改您的文本，您可以使用这段过于复杂的代码：
HTML:
HTML：
<p>I'm moving slowly...<span class="cover"></span></p>
CSS:
CSS：
p {
font-family: monospace;
float: left;
padding: 0;
position: relative;
}
.cover {
height: 100%;
width: 100%;
background: #fff;
position: absolute;
top: 0;
right: 0;
}
jQuery:
jQuery：
var $p = $('p'),
$cover = $('.cover'),
width = $p.width(),
decrement = width / $p.text().length;
function addChar()
{
$cover.css('width', '-=' + decrement);
if ( parseInt( $cover.css('width') ) < width )
{
setTimeout(addChar, 300);
}
}
addChar();
And finally, here's the fiddle: http://jsfiddle.net/dDGVH/236/
最后，这是小提琴：http: //jsfiddle.net/dDGVH/236/
But, seriously, don't use this...
但是，说真的，不要使用这个......
回答by hobberwickey
When I did this I ran into the problem of a word jumping from the end of one line to the begging of the next as it the letters appeared to get around this I used to side by side spans, one of which the text was transparent, the other visible and simply moved letters one by one from the invisible span to the visible. Here's a fiddle.
当我这样做时，我遇到了一个单词从一行的末尾跳到下一行的问题，因为这些字母似乎绕过了这个我过去常常并排的跨度，其中一个文本是透明的，另一个可见的，只是将字母从不可见的跨度一个一个地移动到可见的。这是一个小提琴。
HTML
HTML
<div class='wrapper'>
<span class='visible'></span><span class='invisible'></span>
</div>
CSS
CSS
.visible {
color: black;
}
.invisible {
color: transparent;
}
JS
JS
var text = "Whatever you want your text to be here",
soFar = "";
var visible = document.querySelector(".visible"),
invisible = document.querySelector(".invisible");
invisible.innerHTML = text;
var t = setInterval(function(){
soFar += text.substr(0, 1),
text = text.substr(1);
visible.innerHTML = soFar;
invisible.innerHTML = text;
if (text.length === 0) clearInterval(t);
}, 100)
回答by Abdennour TOUMI
Make your code more elegant by preparing promises for each iteration, then execute them as second step where you can inject DOM logic.
通过为每次迭代准备 Promise 使您的代码更加优雅，然后将它们作为第二步执行，您可以在其中注入 DOM 逻辑。
const message = 'Solution using Promises';
const typingPromises = (message, timeout) =>
[...message].map(
(ch, i) =>
new Promise(resolve => {
setTimeout(() => {
resolve(message.substring(0, i + 1));
}, timeout * i);
})
);
typingPromises(message, 140).forEach(promise => {
promise.then(portion => {
document.querySelector('p').innerHTML = portion;
});
});<div ><p></p></div>回答by Hazem_M
I made a tiny jquery plugin for that. First you need to make sure that the text will be visible if javascript is disabled, and if not, redisplay the text letter by letter.
我为此制作了一个很小的 jquery 插件。首先，您需要确保如果 javascript 被禁用，文本将可见，如果没有，则逐个字母重新显示文本。
$.fn.retype = function(delay) {
var el = this,
t = el.text(),
c = t.split(''),
l = c.length,
i = 0;
delay = delay || 100;
el.empty();
var interval = setInterval(function(){
if(i < l) el.text(el.text() + c[i++]);
else clearInterval(interval);
}, delay);
};
Usage will be just as easy as this:
使用就像这样简单：
$('h1').retype();
回答by Luke Wenke
This is based on armen.shimoon's:
这是基于 armen.shimoon 的：
var showText = function (target, message, index, interval) {
if (index <= message.length && $(target).is(':visible')) {
$(target).html(message.substr(0, index++));
setTimeout(function () { showText(target, message, index, interval); }, interval);
}
}
message[index++] wasn't working in my jquery webpage - I had to change it to substr. Also my original text uses HTML and the text that is typed uses HTML formatting (br, b, etc). I've also got the function stopping if the target has been hidden.
message[index++] 在我的 jquery 网页中不起作用 - 我不得不将其更改为 substr。此外，我的原始文本使用 HTML，键入的文本使用 HTML 格式（br、b 等）。如果目标已隐藏，我也会停止该功能。
回答by Chuck Le Butt
Vanilla JavaScript version of @armen.shimoon's answer:
@armen.shimoon 答案的香草 JavaScript 版本：
document.addEventListener('DOMContentLoaded', function() {
showText("#msg", "Hello, World!", 0, 100);
});
let showText = function (target, message, index, interval) {
if (index < message.length) {
document.querySelector(target).innerHTML =
document.querySelector(target).innerHTML + message[index++];
setTimeout(function () { showText(target, message, index, interval); }, interval);
}
}<div id="msg"></div>
<span id="text_target"></span>回答by BFP
function textRoll(message, interval){
setTimeout(() => {
para.innerHTML += message.charAt(0);
return textRoll(message.slice(1))
}, interval)
}
