如何使用 jQuery 实现每几秒随机高亮列表中的一个单词-html教程-PHP中文网

本文介绍如何将形如“XXX - YYY - ZZZ”的分隔字符串拆分为独立单词，用包裹后，通过定时器随机为其中一个单词添加高亮样式，并循环切换，实现动态视觉强调效果。

本文介绍如何将形如“xxx - yyy - zzz”的分隔字符串拆分为独立单词，用 `` 包裹后，通过定时器随机为其中一个单词添加高亮样式，并循环切换，实现动态视觉强调效果。

要实现“每几秒随机高亮一个单词”的交互效果，核心步骤包括：文本解析 → DOM 结构化 → 定时高亮切换。下面以 jQuery 为例，提供完整、可直接运行的解决方案。

✅ 步骤一：结构化原始文本

首先，从容器中提取纯文本（避免误解析 HTML），按 " - " 分割为单词数组，再用封装每个单词，并重新注入 DOM：

const $container = $("#highlight-list");
const words = $container.text().split(" - ");
const html = words.map(word => `<span>${word.trim()}</span>`).join(" - ");
$container.html(html);

⚠️ 注意：使用 .text() 而非 .html() 提取内容，确保安全；.trim() 清除首尾空格，提升健壮性。

✅ 步骤二：定时随机高亮

利用 setInterval 每 1500ms（1.5秒）执行一次高亮逻辑：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

移除所有已有 .highlight 类；
随机生成索引（Math.floor(Math.random() * spans.length)）；
为目标添加高亮类。

setInterval(() => {
  const $spans = $("#highlight-list > span");
  $spans.removeClass("highlight");

  const randomIndex = Math.floor(Math.random() * $spans.length);
  $spans.eq(randomIndex).addClass("highlight");
}, 1500);

? 提示：若需避免连续两次高亮同一单词，可记录上一次索引并做校验（见进阶优化）。

✅ 步骤三：定义高亮样式

配合 CSS 控制视觉效果，例如背景色+文字反色：

#highlight-list > span {
  padding: 0.25em 0.5em;
  margin: 0 2px;
  border-radius: 3px;
  transition: all 0.3s ease;
}
.highlight {
  background-color: #6a0dad;
  color: white;
  font-weight: bold;
  transform: scale(1.1);
}

? 完整可运行示例



  <style>
    #highlight-list > span { padding: 0.25em 0.5em; margin: 0 2px; border-radius: 3px; transition: all 0.3s ease; }
    .highlight { background-color: #6a0dad; color: white; font-weight: bold; transform: scale(1.1); }
  </style><div id="highlight-list">Apple - Banana - Cherry - Date</div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>
    const $container = $("#highlight-list");
    const words = $container.text().split(" - ");
    const html = words.map(w => `<span>${w.trim()}`).join(" - ");
    $container.html(html);

    setInterval(() => {
      const $spans = $container.children("span");
      $spans.removeClass("highlight");
      const idx = Math.floor(Math.random() * $spans.length);
      $spans.eq(idx).addClass("highlight");
    }, 1500);
  </script>