[已解决]如何实现打字的效果

琅琊王朝 · 发表于 2023-9-23 21:19:26

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

rt
例如Ben的博客
https://loujunyi-blog.netlify.app/

最佳答案

月排行榜 / 总排行榜

Mike_python小

2023-9-23 21:50:25

琅琊王朝发表于 2023-9-23 18:48
怎么循环

https://blog.csdn.net/qq_32623363/article/details/77429463

跳转到最佳答案楼层

isdkz · 发表于 2023-9-23 21:19:33

要实现打字的效果，可以使用JavaScript来控制文本的逐个显示。以下是一个简单的实现方式：

HTML：

<p id="text"></p>

复制代码

JavaScript：

const text = "例如Ben的博客";

let index = 0;

function typing() {

if (index < text.length) {

document.getElementById("text").innerHTML += text.charAt(index);

index++;

setTimeout(typing, 50); // 设置打字速度

}

}

typing();

复制代码

这段代码会逐个显示文本中的字符，直到全部显示完毕。可以通过调整setTimeout中的时间来控制打字的速度。

陶远航 · 发表于 2023-9-23 21:19:38

要实现打字的效果，你可以使用一些前端技术来模拟逐字逐句地显示文本内容。以下是一种常见的方法：

1. HTML 结构：

<div id="typing-effect"></div>

复制代码

2. CSS 样式：

#typing-effect {
font-family: monospace;
white-space: pre;
}

复制代码

3. JavaScript 代码：

const text = "Ben的博客https://loujunyi-blog.netlify.app/"; // 要显示的文本内容
const typingEffectElement = document.getElementById("typing-effect");
let index = 0; // 当前显示的字符索引
function displayText() {
typingEffectElement.textContent = text.slice(0, index + 1); // 截取前index个字符
index++;
if (index < text.length) {
setTimeout(displayText, 100); // 设置延迟时间控制打字速度
}
}
displayText();

复制代码

上述代码将文本内容逐字逐句地显示在 id 为 typing-effect 的元素中。通过设置 setTimeout 函数来控制每个字符的显示间隔，达到打字的效果。

你可以在你的网站中插入以上代码，并将 <div id="typing-effect"></div> 放置在合适的位置。当页面加载时，它会逐步显示出 "Ben的博客https://loujunyi-blog.netlify.app/" 这段文字。

希望这个解决方案对你有所帮助！如果你有任何其他问题，请随时提问。
如果问题已经解决，请设置最佳答案

Mike_python小 · 发表于 2023-9-23 21:19:55

实现打字效果的方法：

要实现网页上的打字效果，您可以使用JavaScript来控制文字逐个显示。下面是一个简单的示例代码：

HTML部分：
[/code]html
<!DOCTYPE html>
<html>
<head>
  <title>打字效果示例</title>
  <style>
#text {
   white-space: pre;
   font-family: monospace;
}
  </style>
</head>
<body>
  <div id="text"></div>

  <script src="script.js"></script>
</body>
</html>
[/code]

JavaScript（script.js）部分：
[/code]javascript
var textElement = document.getElementById('text');
var text = "这是一段需要逐个显示的文字。";
var speed = 100; // 每个字符的显示间隔时间（以毫秒为单位）

function displayText() {
  for (var i = 0; i < text.length; i++) {
setTimeout(function(index) {
   textElement.innerHTML += text[index];
}, i * speed, i);
  }
}

displayText();
[/code]

上述代码中，我们将需要逐个显示的文字储存在变量text中，并通过setTimeout()函数来实现逐个显示。

在displayText()函数中，我们使用for循环和setTimeout()函数实现了逐个显示文字的效果。在每个循环迭代中，通过设置不同的延迟时间，逐个将字符追加到textElement元素中。

需要注意的是，我们在HTML部分的CSS样式中使用了white-space: pre;来保留文本中的空格和换行符，以保持打字效果的准确性。

您可以将上述代码保存为index.html和script.js，然后在浏览器中打开index.html文件，就可以看到逐个显示文字的效果了。

希望这个示例能帮助您实现所需的打字效果！如有疑问，请随时追问。

球一个最佳答案谢谢啦！这对我非常重要！

Mike_python小 · 发表于 2023-9-23 21:29:21

他这个基本上都是用搭建工具生成的

https://www.bilibili.com/video/B ... arch-card.all.click

可以去看看搭建的工具

琅琊王朝 · 发表于 2023-9-23 21:38:01

Mike_python小发表于 2023-9-23 21:29
他这个基本上都是用搭建工具生成的

https://www.bilibili.com/video/BV1qD4y1z783/?spm_id_from=333.337 ...

我只想要这一部分，hexo太麻烦了

Mike_python小 · 发表于 2023-9-23 21:43:05

琅琊王朝发表于 2023-9-23 18:38
我只想要这一部分，hexo太麻烦了

https://blog.csdn.net/Mq_sir/article/details/120815455这个呢？

琅琊王朝 · 发表于 2023-9-23 21:48:45

Mike_python小发表于 2023-9-23 21:43
https://blog.csdn.net/Mq_sir/article/details/120815455这个呢？

怎么循环

Mike_python小 · 发表于 2023-9-23 21:50:25

这个最佳答案由 Mike_python小给出，感谢 Mike_python小的回答。

单击隐藏图章

琅琊王朝发表于 2023-9-23 18:48
怎么循环

https://blog.csdn.net/qq_32623363/article/details/77429463

歌者文明清理员 · 发表于 2023-9-24 09:28:12

不要用 cdn.jsdelivr，被 dns 污染了

代替：https://www.staticfile.org/

账号		自动登录	找回密码
密码			立即注册

[已解决]如何实现打字的效果

马上注册，结交更多好友，享用更多功能^_^

浏览过的版块