Javascript中的打字机效果不起作用

在JavaScript中，打字机效果通常通过使用定时器和字符串截取来实现。以下是一个简单的示例代码，展示了如何在网页中实现打字机效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    #text {
      white-space: nowrap;
      overflow: hidden;
      border-right: .15em solid orange;
      animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
    }

    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }

    @keyframes blink-caret {
      from, to { border-color: transparent }
      50% { border-color: orange; }
    }
  </style>
</head>
<body>
  <h1 id="text"></h1>

  <script>
    var text = "这是一个打字机效果的例子。";
    var speed = 100; // 每个字符的打印速度（毫秒）

    function typeWriter() {
      if (i < text.length) {
        document.getElementById("text").innerHTML += text.charAt(i);
        i++;
        setTimeout(typeWriter, speed);
      }
    }

    var i = 0;
    typeWriter();
  </script>
</body>
</html>

上述代码中，通过使用CSS的动画效果和JavaScript的定时器，实现了一个打字机效果。具体实现步骤如下：

在HTML中，创建一个具有唯一标识符的元素（例如<h1 id="text"></h1>），用于显示打字机效果。
在CSS中，定义了#text选择器的样式，包括文字溢出隐藏、边框动画等效果。
在JavaScript中，定义了typeWriter函数，用于逐个字符地将文本添加到指定元素中，并通过定时器控制打印速度。
在页面加载完成后，调用typeWriter函数开始打字机效果。

这个打字机效果可以应用于各种场景，例如网页标题、欢迎语、产品介绍等，以吸引用户的注意力。在实际开发中，可以根据需求进行样式和速度的调整。

腾讯云提供了一系列与前端开发相关的产品和服务，例如：

云服务器（CVM）：提供可扩展的云服务器实例，用于部署网站和应用程序。
云存储（COS）：提供安全可靠的对象存储服务，用于存储和分发静态资源。
内容分发网络（CDN）：加速网站和应用程序的内容分发，提供更快的访问速度。
云函数（SCF）：无服务器计算服务，用于运行和扩展代码逻辑。
云端开发工具（CLB）：提供一站式的云端开发工具，帮助开发者快速构建应用。

以上是腾讯云的一些相关产品和服务，可以根据具体需求选择适合的产品来支持前端开发和打字机效果的实现。

Javascript中的打字机效果不起作用

、

我看了一些关于如何制作打字机效果的例子，但我的解决方案似乎不起作用。我有三个句子，我想永远循环，让它们逐个字母地打字，以获得打字机效果。下面是我的代码：<html> <meta charset="utf-8"> <title>Кухнята на Дани</title><link rel=&quo

浏览 35提问于2020-05-07得票数 0

回答已采纳

2回答

具有多行和html标记的javascript类型编写器

、

我需要一个javascript效果来模拟网站上的打字机。问题是我不能输出任何html标签(比如物理打印<和>符号)。输出示例<body>我尝试将选项"writingTag“设置为true，但不起作用。编辑:我尝试使用& lt；e& gt；但什么都没有

浏览 6提问于2020-04-20得票数 1

1回答

在javascript中有类似手写的效果插件吗？

、、、、

我是一个学生，想为我的新生班级创建一个仪表盘。为了让它更华丽，我想使用一个手写效果。让我解释一下。我是不是疯了，认为这是可能的，还是有一个我可以使用的jquery插件？

浏览 0提问于2012-12-04得票数 0

回答已采纳

1回答

JavaScript的打字机效果

、、

我是JavaScript的新手，我不明白如何才能创建这样的打字机效果，我在改变它的一些单词的颜色时遇到了问题。我已经做了类似这样的Sugar, Spice, everythingNice

浏览 15提问于2021-08-29得票数 0

回答已采纳

1回答

JavaScript打字机退格效果

我试着减少I，但也不起作用。另外，我如何添加一个延迟，这样退格效果就不会立即开始了？ var i = 0; var txt = 'Lorem ipsum dummy text blabla.

浏览 16提问于2019-02-13得票数 1

回答已采纳

2回答

多行Javascript打字机效果

、

我发现了一个很好的typewriter effect，它可以在你点击按钮时打印文本，它工作得很好。但是，如果我想使用这个脚本创建多个按钮来打印不同的文本，它就不能工作。Javascript： <script>var txt = 'Text goes here'; function typeWriter()

浏览 17提问于2020-03-16得票数 0

2回答

打字机和设置持续时间

、、、、

我想要在HTML/JavaScript/jQuery中实现打字机效果，例如，但我需要指定动画的总持续时间。例如，如果我设置为10秒，字符串是"dog“，动画将非常慢。这个是可能的吗？谢谢。

浏览 28提问于2017-01-14得票数 0

回答已采纳

3回答

使用JavaScript实现超文本标记语言的打字机效果

、、、

我想做以下事情:我想在HTML/JavaScript (如果需要的话，jQuery/jQuery UI )中实现打字机效果。关于如何在字符串上创建打字机效果(例如)，有很多很好的例子。我想做一些类似的事情，但是要有一个完整的HTML字符串，它不应该被输入出来，而是正确地插入到网页中。</p> 此字符串应使用打字机动画输入。“特殊字符串”的颜色应该是红色<em

浏览 4提问于2014-03-05得票数 11

回答已采纳

3回答

用jquery更新数据类型属性

、、

我使用下面的HTML代码通过javascript实现了一种打字机效果打印效果使用data-type属性作为将要写入的文本的输入。它将写第一句"Hi, Im Si.

浏览 8提问于2021-01-14得票数 0

回答已采纳

1回答

使用另一个变量创建打字机效果

、、

我正在寻找一个使用变量的打字机效果。我的变量将选择一个要写入的随机字符串。我希望它以同样的方式列出字符串，但我希望它使用打字机的效果来实现它！无论我在哪里看，我找不到一个如何使打字机的效果的答案，它不会打字的功能！我想要它根据变量输入一个随机文本！谢谢!Finalising Deletion...";

浏览 7提问于2021-12-17得票数 2

回答已采纳

3回答

jTicker插件的无限循环

、

我有一个jQuery效果，可以像打字机一样输入简单的文本，或者如果你是手动输入的话。我需要等待几秒钟的效果，删除所有的文本，然后重新键入它。所以我想让它产生一种“无限”的循环效果。这是我使用的代码：&l

浏览 2提问于2012-11-11得票数 0

回答已采纳

3回答

使用Array的Javascript打字机效果

、、

我试图使用数组在javascript中实现打字机的效果。一开始，我在数组中硬编码了一个字符串，结果正常工作。后来，我尝试用用户输入做同样的事情，但是它不能工作。这是硬编码的版本：<head>var arr=new Array()var end=start： &l

浏览 0提问于2012-08-12得票数 1

回答已采纳

1回答

带下划线的打字机文本，用于打字和擦除(在一个循环中)

、、

我在这个网站上发现了一个惊人的打字效果：我需要找到一个脚本，是可比较的，如果不是相同的。埃里克

浏览 0提问于2011-07-01得票数 0

回答已采纳

1回答

在Wordpress快捷代码中添加PHP

、

我无法让我的代码正常工作。打字机效果的缩写是：这篇文章的标题PHP是<?php $the_title

浏览 2提问于2017-09-27得票数 0

1回答

如何在TypeWriter /CSS/JavaScript中放置闪烁效应

、、

我试图输出带有打字机效果的Hello World_，并使__闪烁。目前，我正在使用HTML和CSS来制作_ blink，并且使用Javascript在打字机效果中键入Hello。现在，我的代码打印出_然后Hello。我一直很难让它看起来像Hello World_，下划线还在闪烁。谢谢!animation: blinker 1.5s linear infinite;@keyframes blinker { opacity: 0; 因

浏览 2提问于2021-04-13得票数 1

回答已采纳

2回答

AS3的打字机效果

、

我正在尝试用AS3创建一个打字机效果。我在打洞那天看了一些教程，但是找不到我要找的东西……这就是我想要的：-打字机文本效果-速度可以设置-不从外部.as文件导入-不从外部.txt文件导入(文本应该用变量定义)-如果文本字段充满文本，它应该“滚动”down....it应该跳到下一行，这样就有一个新的空行，打字机可以在那里写...你的actionscript专家能帮我吗？我一直在使用as2，在as3中</e

浏览 0提问于2012-04-24得票数 0

2回答

Javascript打字机效果暂停/停止按钮

、

下面的脚本允许我在单击按钮时使用打字编写器效果播放文本。但是，当再次单击按钮时，如何更改允许暂停或停止脚本的代码。HTML <div class="play" id="playbtn"></div> destination=des

浏览 7提问于2013-03-20得票数 2

回答已采纳

1回答

如何用javascript替换打字机效果中的单词

、

现在，我正在练习javascript，我想对文本进行打印，逐字符显示，然后暂停1秒，然后一个接一个地删除。我已经做了这个部分，它对我有用，但我想做更多的事情，第一，我想打印一个不同的词，每次删除前一个，这些词将预定义在数组中，与他们迭代，第二个是让这是无限期的。-- here printwords --> Javascript： const contenedorParrafo = document.querySelect

浏览 7提问于2022-11-13得票数 0

回答已采纳

1回答

附加fadeIn的打字机

、、

你好，我正在尝试制作带有fadeIn效果的打字机，但是我的方法不起作用。您能告诉我如何在这个脚本中添加fadeIn效果吗？

浏览 1提问于2014-06-06得票数 3

回答已采纳

1回答

属性[数据类型]的值必须在双引号-自定义html小部件错误中。

、

我正在尝试使用JavaScript打字机效果，WordPress向我抛出以下错误(属性数据类型的值必须在双引号中)。当将html添加到自定义html小部件时。我已经有了CodePen上的代码。谢谢你的进阶。

浏览 0提问于2018-03-14得票数 2

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Javascript中的打字机效果不起作用

相关·内容

Javascript中的打字机效果不起作用

具有多行和html标记的javascript类型编写器

在javascript中有类似手写的效果插件吗？

JavaScript的打字机效果

JavaScript打字机退格效果

多行Javascript打字机效果

打字机和设置持续时间

使用JavaScript实现超文本标记语言的打字机效果

用jquery更新数据类型属性

使用另一个变量创建打字机效果

jTicker插件的无限循环

使用Array的Javascript打字机效果

带下划线的打字机文本，用于打字和擦除(在一个循环中)

在Wordpress快捷代码中添加PHP

如何在TypeWriter /CSS/JavaScript中放置闪烁效应

AS3的打字机效果

Javascript打字机效果暂停/停止按钮

如何用javascript替换打字机效果中的单词

附加fadeIn的打字机

属性[数据类型]的值必须在双引号-自定义html小部件错误中。

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐