逐个字母显示文字

小编典典

逐个字母显示文字

css

用CSS和JavaScript逐个字母显示html文本（例如视频游戏字幕）的最优雅的方法是什么？

虽然我确定可以使用蛮力方法解决他的问题（例如，将字符拆分并使用逐个打印jQuery.append()），但我希望有一些CSS3（伪元素？）或JQuery魔术可以做到这一点更优雅。

如果解决方案考虑内部HTML内容，则需要加分。

阅读 292

2020-05-16

共1个答案

小编典典

HTML

<div id="msg"/>

Java脚本

var showText = function (target, message, index, interval) {   
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
  }
}

致电：

$(function () {
  showText("#msg", "Hello, World!", 0, 500);   
});

2020-05-16