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

如何使用 jQuery 每隔几秒高亮列表中的一个随机单词

本文介绍如何将形如“xxx - yyy - zzz”的连字符分隔文本自动拆分为独立可操作的单词，并利用 jquery 和 css 实现每秒（或自定义间隔）随机高亮其中一个单词的完整方案。

本文介绍如何将形如“xxx - yyy - zzz”的连字符分隔文本自动拆分为独立可操作的单词，并利用 jquery 和 css 实现每秒（或自定义间隔）随机高亮其中一个单词的完整方案。

要实现动态高亮分隔文本中的随机单词，核心在于三步：结构化拆分 → 封装为可样式化元素 → 定时轮播高亮。以下为完整、健壮且可直接运行的实现方案。

首先，确保 HTML 结构简洁规范（注意原问题中误用了闭合标签，应为

<div id="highlight-list">XXX - YYY - ZZZ</div>

接着引入 jQuery（推荐 CDN）并执行初始化逻辑：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>
$(function() {
  // 1. 提取纯文本并按 " - " 拆分（避免正则歧义，直接字符串分割更可靠）
  const words = $("#highlight-list").text().split(" - ").map(w => w.trim());

  // 2. 构建带 <span> 包裹的 HTML，保留原始分隔符语义
  const html = words.map(word => `<span>${word}`).join(" - ");
  $("#highlight-list").html(html);

  // 3. 启动定时高亮：每 1500ms 随机选中一个 span 并添加 .highlight 类
  const $spans = $("#highlight-list > span");
  let lastHighlightedIndex = -1;

  setInterval(() => {
    // 移除所有已有高亮
    $spans.removeClass("highlight");

    // 防止连续两次高亮同一单词（可选增强逻辑）
    let index;
    do {
      index = Math.floor(Math.random() * $spans.length);
    } while ($spans.length > 1 && index === lastHighlightedIndex);

    lastHighlightedIndex = index;
    $spans.eq(index).addClass("highlight");
  }, 1500);
});
</script>

配套 CSS 建议如下，兼顾可读性与视觉反馈：

jQuery 1.12.4

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

下载

#highlight-list > span {
  padding: 0.25em 0.5em;
  margin: 0 2px;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: inline-block;
}

.highlight {
  color: #fff;
  background-color: #6a0dad; /* rebeccapurple */
  font-weight: bold;
  transform: scale(1.08);
}

✅ 关键注意事项：