在漫川的Blog（MANCS.CN）看到网址栏有动态的打字效果，然后用Manus弄了半天，最后还是用Kimi搞定了。

一、效果展示

动态打字效果模拟了在浏览器地址栏中逐字输入文本的过程，常用于个人博客、创意作品集或强调交互性的网站。例如，当用户访问您的网站时，浏览器地址栏会逐渐显示“Hi, I'm Evan”，就像有人手动输入一样，给访问者带来新奇的体验。

二、实现原理

浏览器地址栏的显示行为主要由浏览器自身控制，我们无法直接修改其样式和行为。但可以通过 JavaScript 快速修改 URL 的哈希（# 后面的部分）和页面标题来模拟打字效果。

三、具体实现步骤

（一）创建 JavaScript 文件

1. 使用代码编辑器（如 VS Code、Notepad++ 等）创建一个新文件，命名为 address-bar-typing-effect.js
2. 将以下代码复制到文件中：

function typeToAddressBar(text, speed = 100, callback) {
  let i = 0;
  let currentHash = "";
  const originalTitle = document.title;

  function typeChar() {
    if (i < text.length) {
      currentHash += text.charAt(i);
      window.location.hash = encodeURIComponent(currentHash);
      document.title = currentHash;
      i++;
      setTimeout(typeChar, speed);
    } else {
      if (callback) {
        callback();
      }
    }
  }

  document.addEventListener('DOMContentLoaded', () => {
    typeChar();
  });
}

typeToAddressBar("Hi, I'm Evan");

注意⚠️放在根目录，还有权限是644

此代码通过逐步修改 window.location.hash 和 document.title 来模拟打字效果。speed 参数控制打字速度，callback 参数可用于在打字完成后执行其他操作。

（二）将 JavaScript 文件添加到 WordPress

1. 上传文件：使用 FTP 客户端或 WordPress 文件管理器将 address-bar-typing-effect.js 文件上传到您 WordPress 安装的根目录（通常是 /你的网站名称/）。
2. 修改 functions.php 文件：
   登录 WordPress 后台，进入“外观” -> “主题文件编辑器”。在右侧文件列表中找到并点击 functions.php 文件。在文件末尾添加以下代码：

function enqueue_address_bar_typing_script() {
    wp_enqueue_script(
        'address-bar-typing-effect',
        home_url('/address-bar-typing-effect.js'),
        array(),
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_address_bar_typing_script');

注意⚠️放入的位置不要错

这段代码确保在页面加载时引入 JavaScript 文件。

四、效果验证与优化

1. 清除缓存：清除浏览器缓存和 WordPress 缓存（如果您使用了缓存插件），以确保看到最新的效果。
2. 访问网站：刷新网站页面，观察浏览器地址栏的打字效果。
3. 优化调整：

• 调整速度：修改代码中的 speed 参数以改变打字速度。
• 自定义文本：替换 "Hi, I'm Evan" 为您想展示的文本。
• 考虑 SEO 和用户体验：虽然动态修改 URL 哈希通常不会对 SEO 产生负面影响，但要确保不会干扰用户正常浏览行为。

五、总结

通过以上步骤，您可以在 WordPress 网站的浏览器地址栏中实现动态打字效果，为网站增添独特的互动元素。这种方法既独立又安全，不会对主题文件造成直接修改，便于后续更新和维护。希望本文能帮助您提升网站的创意与吸引力。

写在最后：自定义文本中间如果有空格的话，就是有字符出现。解决方式：1 不要出现空格；2 不用JS改用HTML，但需要你用JS代码让AI再改。

转载或引用本站文章请注明出处
© 2024 www.evan.xin