JavaScript-如何逐个字符显示文本

JavaScript - How do I display a text, character by character

本文关键字：显示 文本 字符 何逐个 JavaScript-      更新时间：2023-09-26

我正在尝试使用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 />，并在同一行打印两条消息。

您有两个选项：

  • 插入<br />并告诉浏览器将其解析为HTML。

    可以使用innerHTML属性而不是textContent来执行此操作。

    这将允许您使用像<br />这样的HTML内容，但当它们应该是纯文本时，您必须转义&、<和>。如果你不信任文本，就不要这样做。

    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-spaceCSS属性设置为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>

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>

相关文章：