使用JavaScript实现HTML的打字机效果

我想做以下事情：我想在HTML/JavaScript（jQuery/jQueryUI，如果需要的话）中有一个打字机效果。有很多关于如何在字符串上创建打字机效果的好例子（例如）。我想做一些类似的事情，但是使用一个完整的HTML字符串，它不应该被打印出来，而是正确地插入到网页中

示例字符串：

<p>This is my <span style='color:red;'>special string</span> with an <img src="test.png"/> image !</p>

这是我的带有图像的特殊字符串

---

应使用打字机动画键入此字符串。即使在键入时，“特殊字符串”的颜色也应为红色，并且图像应显示在“an”之后和“image”之前。解决方案存在的问题是，它们将标记逐个字符插入到网页中，这导致在本例中键入“特殊字符串”时出现未关闭状态。我考虑过用jQuery解析字符串并在数组上迭代，但我不知道如何处理嵌套标记（如本例中的p和span）

我将向您介绍我使用它的旧网站设计

它使用jTypeWriter.js、blink.js和jquery

在源代码中，您将看到代码

您可能想看看

函数start（）

这将启动登录设计。实际上，我把它暂停了，因为实际上我正在处理一些IRL的小问题，但您至少可以很容易地看到一个工作示例：）

代码：

标记：

<pre id="start" style="display:none;">localhost$ <span id="ssh" style="display:none;">ssh fallenreaper@www.fallerneaper.com</span></pre>

localhost$sshfallenreaper@www.fallerneaper.com

上有一个很棒的插件。自述文件中的示例如下所示：

var tw = typewriter($('.whatever')[0]).withAccuracy(90)
                                     .withMinimumSpeed(5)
                                     .withMaximumSpeed(10)
                                     .build();

它很好，可配置，这取决于您希望输出的人性化程度。一个简单的例子如下所示：

var tw = typewriter($('.whatever')[0]).withAccuracy(90)
                                     .withMinimumSpeed(5)
                                     .withMaximumSpeed(10)
                                     .build();

---

我想你不需要插件来做这件事，我举了一个简单的例子：

html:

js:

var str=“这是我的带有图像的特殊字符串！
”，
i=0，
伊斯塔格，
文本；
（函数类型（）{
text=str.slice（0，+i）；
如果（text==str）返回；
document.getElementById（'typewriter'）。innerHTML=text；
var char=text.slice（-1）；
如果（char==''）isTag=false；
if（isTag）返回类型（）；
设置超时（类型，80）；
}());

---

这是

上的演示，我不会反对投票，但这应该是现实的；如果你要引用一个外部站点，至少要把相关的代码放在上面，这样人们就不必去访问了（这是留给后人的）。我将链接代码，然后你的例子背后的想法是为每个html标记合并一个函数。我正在寻找一种更灵活的方法，它可以处理或多或少的动态文本输入（其思想是服务器将预先格式化的字符串发送给客户机，然后客户机将其输出给用户）。我的示例使用将一组字符串链接在一起，以产生控制台的错觉。我不知道你是否想过要这样做，但通过从服务器获取文本，你可以很容易地说：

$（“”）。append（\u new\u text_here）。hide（）。appendTo（\u target_）。show（）。jTypeWriter（{some:“value”，将：“go”，here:“}）

，我找不到jTypeWriter.js的最新版本进行评估-我找到的所有链接都没有指向任何地方…我刚刚意识到这个插件是用f******Coffeescript编写的，所以你需要自己编译到js。《读者手册》中有一些说明，我曾经真正涉猎过咖啡剧本，但我听到了一些好消息。我想我可以研究一下，用jTypeWriter jQuery插件来取代目前的做法。这些天来，我看到有人在Github repo中编写Coffeescript而不是JS。我听到人们说插件的次数比他们在代码中使用

var

关键字的次数还要多：）谢谢这个插件——它看起来很酷，但并不能解决我的问题。如果我给它输入示例中的字符串，它会在不改变颜色的情况下将其键入。我已经回顾了这个问题-它确实是我问题的解决方案。我已经投票结束了这个问题。比副本中的解决方案简单得多。看起来很棒-谢谢！但是有一个问题（与上面的问题无关），围绕（…（））函数做什么？我一直想知道，但没有合适的关键字来谷歌它。@PhilippFlenker它被称为一个自调用函数（匿名函数），它返回一个函数对象。当您向其追加（）时，将调用它并执行正文中的任何内容。创建命名函数并执行它（当然，名称除外）有什么区别吗？是否有可能模拟所选文本的一部分？我想在HubSpot主页上创建一个与此效果非常相似的东西：www.HubSpot.com对此做了一些修改。可以用作包含文本的所有HTML元素的函数。var animateText=function（element）{var str=element.innerHTML，i=0，text；（function type（）{text=str.slice（0，++i）；element.innerHTML=text；if（text==str）返回；setTimeout（type，90）；}（）；}

 <div id="typewriter"></div>

var str = "<p>This is my <span style='color:red;'>special string</span> with an <img src='http://placehold.it/150x150'> image !</p>",
    i = 0,
    isTag,
    text;

(function type() {
    text = str.slice(0, ++i);
    if (text === str) return;

    document.getElementById('typewriter').innerHTML = text;

    var char = text.slice(-1);
    if( char === '<' ) isTag = true;
    if( char === '>' ) isTag = false;

    if (isTag) return type();
    setTimeout(type, 80);
}());