当前位置: 首页 > 面试题库 >

逐个字母显示文字

赵正雅
2023-03-14
问题内容

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

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

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


问题答案:

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);   
});


 类似资料:
  • 问题内容: 我了解使用CSS格式可以通过以下方式设置每个段落的首字母: 但是,使用此代码后,无法从Web浏览器中突出显示/选择这些“首字​​母”,有没有办法对此进行修改? 编辑-可以选择文本,但是看不到它,如何更改呢? 问题答案: 这是Chrome / ium / WebKit中的错误:https : //code.google.com/p/chromium/issues/detail? id =

  • 如果有人知道是怎么回事,请帮忙。我已经尝试了我在互联网上找到的所有东西,但到目前为止都无济于事。出于某种原因,在idea中启动项目时,页面上显示的是问号而不是俄语字母 我已经尝试过: > 我确保windows控制台以866响应chcp请求,我读到最好设置此值 同样在区域标准设置中,在选项卡中,我还单击了“更改系统语言”按钮,然后取消选中“测试版:使用 Unicode (UTF-8) 支持全球语言”

  •  这个世界上的文字类冒险游戏,显示文字方式可以大致分为在对话框内显示和电子小说式全画面窗口(Visual-Novel Type)两种。只是文字显示位置的不同,并没有特别大的差异。以上两种显示方式 KAG 均支持。 两种文字显示方式  此外,也能做到竖行显示。 竖行显示  KAG 默认的设定使用的是横行显示和电子小说式。详细的说明请参考 Config.tjs 。本教程将以使用电子小说式为前提,继续说

  • 我正在努力阅读附加的TXT文件,以csv形式显示从文件中读取的每个字段,我做了一个接近我想要的代码,但我没有前进。 TXT文件格式: 我的代码在我想要的位置读取第一行,但下面的行我不能,更不用说重复文件中包含的下一个工资单的读数了。 目前的输出是这样的: 出口应该是怎样的 逐行读取和捕获数据,我必须完成一个工资单,它将在输出中形成一行,第二个工资单将在输出中形成第二行,因此,直到txt文件结束,此

  • 我已经用小写字母写了我的文本,但在android studio中,文本仍然显示为大写: 如果我想写“继续”怎么办?

  • 我想用文本视图做打字机效果的淡入淡出。具体来说,我的活动收到一个带有一些文本的意图,我想让它在文本视图中逐个字母地显示文本: H他她在这里... 我找到了这个很棒的GitHub库,这正是我想要的,但是我很难将它合并到我的项目中,因为它太旧了。有什么方法可以将旧的库导入我的项目中吗? 我正在使用Android Studio Bumblebee 2021.1.1补丁2,Gradle 7.2和Java1