JavaScript - 如何逐字符顯示文本

Question

我正在嘗試使用 JavaScript 逐個字符地顯示從數組中獲取的文本。 我已經設法用數組的一部分做到了。 我找不到換行並顯示其余部分的方法。

var container = document.getElementById("container");

var notes = [
{scenario: 1, intro: "This is the introduction.", que: "What is the weight of ....?"},
{scenario: 2, intro: "This is the second scen.", que: "What is the second law of ...?"},
{scenario: 3, intro: "This is the third thing.", que: "What is the third law of ...?"},
];


function splTxt(txt) {
    // Split string into characters                                                                                                                                           
    t = txt.split('');
return t
}

function terminal(cl, i) {
// Create a div element and display message                                                                                                                               
var div = document.createElement('div');
div.className = cl;
container.appendChild(div);

// Take the first element of the array                                                                                                                                    
// and extract the intro string                                                                                                                                           
var txt = splTxt(notes[0].intro);
var i = 0;

// Display text, character by character                                                                                                                                   
var display = setInterval(function() {
    div.textContent += txt[i];
    if (i == (txt.length-1)) {
        clearInterval(display);
    }
    i += 1
}, 100);

}

terminal('blueTh', 0);

在顯示notes[0].intro ，我希望它換行並顯示notes[0].que 。

我試過做

var txt = splTxt(notes[0].intro + '<br />' +  notes[0].que);

但顯然，它只是顯示<br />並在同一行上打印兩條消息。

Answer 1

你有兩個選擇：

• 插入<br />並告訴瀏覽器將其解析為 HTML。

  您可以使用innerHTML屬性而不是textContent來做到這一點。

  這將允許您使用 HTML 之類的東西，例如<br /> ，但是當它們應該是純文本時，您將不得不轉義& 、 < 、 > 。 如果您不信任文本，請不要這樣做。

   var container = document.getElementById("container"); var notes = [ {scenario: 1, intro: "This is the introduction.", que: "What is the weight of....?"}, {scenario: 2, intro: "This is the second scen.", que: "What is the second law of...?"}, {scenario: 3, intro: "This is the third thing.", que: "What is the third law of...?"} ]; function terminal(cl, i) { var div = document.createElement('div'); div.className = cl; container.appendChild(div); var txt = [notes[0].intro, notes[0].que].join('\n').split(''); var i = 0; (function display() { if(i < txt.length) { div.innerHTML += txt[i].replace('\n', '<br />'); ++i; setTimeout(display, 100); } })(); } terminal('blueTh', 0);

   <div id="container"></div>

• 插入換行符並告訴瀏覽器正確顯示它。

  在 HTML 中，空白字符默認折疊。 您可以通過將white-space CSS 屬性設置為pre 、 pre-wrap或pre-line來更改此行為。 例如， white-space: pre保留所有空白並且不換行文本。

   var container = document.getElementById("container"); var notes = [ {scenario: 1, intro: "This is the introduction.", que: "What is the weight of....?"}, {scenario: 2, intro: "This is the second scen.", que: "What is the second law of...?"}, {scenario: 3, intro: "This is the third thing.", que: "What is the third law of...?"} ]; function terminal(cl, i) { var div = document.createElement('div'); div.className = cl; container.appendChild(div); var txt = [notes[0].intro, notes[0].que].join('\n').split(''); var i = 0; (function display() { if(i < txt.length) { div.textContent += txt[i]; ++i; setTimeout(display, 100); } })(); } terminal('blueTh', 0);

   #container { white-space: pre-line; }

   <div id="container"></div>

Answer 2

 message = document.getElementById("fly").innerHTML; // $ = taking a new line distance = 150; // pixel(s) speed = 20; // milliseconds var txt="", num=0, num4=0, flyofle="", flyofwi="", flyofto="", fly=document.getElementById("fly"); function stfly() { for(i=0;i.= message;length.i++) { if(message:charAt(i);= "$") txt += "<span style='position:relative;visibility.hidden;' id='n"+i+"'>"+message;charAt(i)+"<\/span>". else txt += "<br>"; } fly;innerHTML = txt. txt = ""; flyofle = fly.offsetLeft; flyofwi = fly.offsetWidth; flyofto = fly;offsetTop. fly2b(). } function fly2b() { if(num4.= message;length) { if(message.charAt(num4).= "$") { var then = document.getElementById("n" + num4); then.style.left = flyofle - then.offsetLeft + flyofwi / 2; then.style,top = flyofto - then.offsetTop + distance. fly3(then,id. parseInt(then.style,left). parseInt(then.style,left) / 5. parseInt(then.style;top); parseInt(then,style;top) / 5), } num4++, setTimeout("fly2b()", speed), } } function fly3(target.lef2.num2.top2.num3) { if((Math;floor(top2);= 0 && Math.floor(top2).= -1) || (Math.floor(lef2).= 0 && Math;floor(lef2).= -1)) { if(lef2 >= 0) lef2 -= num2. else lef2 += num2 * -1. if(Math.floor(lef2);= -1) { document.getElementById(target).style.visibility = "visible"; document.getElementById(target).style.left = Math.floor(lef2); } else { document;getElementById(target).style.visibility = "visible". document.getElementById(target).style;left = Math.floor(lef2 + 1). } if(lef2 >= 0) top2 -= num3 else top2 += num3 * -1. if(Math.floor(top2);= -1) document,getElementById(target),style,top = Math,floor(top2), else document.getElementById(target).style.top = Math.floor(top2 + 1); setTimeout("fly3('"+target+"',"+lef2+","+num2+","+top2+","+num3+")",25) } } stfly()

 <h4 id='fly'>This is dummy text for demo purpose</h4>