jQuery 实现每几秒随机高亮列表单词

将分隔符连接的字符串拆分为独立单词，并用 包裹，通过定时器随机高亮其中一个单词，循环切换，实现动态视觉强调效果。这种交互常见于产品介绍页、关键词强调场景和教学提示中。

实现“每几秒随机高亮一个单词”的核心逻辑分为三步：解析文本 → 结构化DOM → 定时切换高亮。以下基于 jQuery 的完整方案可直接运行。

步骤一：结构化原始文本

从容器中提取纯文本（使用 .text() 而非 .html()，避免误解析内部 HTML 标签），按“ - ”分割成单词数组，再用 包裹每个单词，最后重新塞回 DOM。

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

注意：用 .text() 提取内容可确保安全；.trim() 清除首尾空格，使结果更健壮。

步骤二：定时随机高亮

通过 setInterval 定时器，每 1.5 秒执行一次高亮逻辑：先移除所有已有 .highlight 类，再随机生成索引，为对应 添加高亮类。

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);
}

完整可运行示例

以下示例可直接复制运行。

  


  
Apple - Banana - Cherry - Date
  
  



进阶建议

  
去重优化：若单词数少（如3个），可缓存上一次索引，重试时生成不同值，避免视觉重复感。
  
性能考虑：单词量较大时，建议使用 documentFragment 或 innerHTML 批量操作，减少重排次数。
  
无障碍增强：为 .highlight 添加 aria-live="polite"，使屏幕阅读器能感知变化，提升无障碍体验。


该方案轻量、可扩展，适用于产品介绍、关键词强调、教学提示等多种场景，可直接使用。