要完成这个功能，核心是两步：监听目标span的数值变化，以及在数值小于10且当前标签未聚焦时触发标签页聚焦。不过得先提醒你：浏览器出于安全和用户体验考虑，会限制自动聚焦标签页的行为——只有用户先和页面有过交互（比如点击过页面、输入过内容），后续的自动聚焦才会生效，否则会被浏览器拦截。

下面给你两种可行的实现方案：

方案1：定时轮询检测数值（通用方案） #

如果不确定页面是怎么更新span数值的，用定时轮询是最稳妥的方式，每隔一段时间检查一次数值：

// 获取目标span元素，请替换成你实际的选择器
const targetSpan = document.querySelector('span.your-target-selector');

// 设置轮询定时器，每1秒检查一次
const checkInterval = setInterval(() => {
  // 提取span内的数值，处理非数字的异常情况
  const currentValue = parseInt(targetSpan.textContent.trim(), 10);
  
  // 检查数值是否小于10，且当前标签未被聚焦
  if (!isNaN(currentValue) && currentValue < 10 && !document.hasFocus()) {
    // 尝试聚焦当前标签页
    window.focus();
    
    // 可选：修改页面标题强化提醒
    document.title = '⚠️ 数值即将归零！';
    
    // 触发提醒后停止轮询，避免重复触发
    clearInterval(checkInterval);
  }
}, 1000);

方案2：用MutationObserver监听DOM变化（更高效） #

如果页面是通过JS直接更新span的文本内容，用MutationObserver监听DOM变化会比轮询更高效，能实时捕捉数值更新：

const targetSpan = document.querySelector('span.your-target-selector');

// 创建DOM变化观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 检测文本内容或子元素变化
    if (mutation.type === 'characterData' || mutation.type === 'childList') {
      const currentValue = parseInt(targetSpan.textContent.trim(), 10);
      if (!isNaN(currentValue) && currentValue < 10 && !document.hasFocus()) {
        window.focus();
        document.title = '⚠️ 数值即将归零！';
        // 完成提醒后停止监听
        observer.disconnect();
      }
    }
  });
});

// 配置观察选项：监听文本内容及子元素变化
observer.observe(targetSpan, {
  characterData: true,
  childList: true,
  subtree: true // 如果span内部还有嵌套元素，需要开启这个选项
});

关键注意事项 #

• 浏览器权限限制：必须让用户先和页面产生交互（比如点击页面任意位置），否则window.focus()会被浏览器阻止，这是浏览器的默认安全策略。
• 数值格式处理：如果span内的内容包含非数字字符（比如“剩余时长：8”），需要先提取数字部分，比如用正则：const currentValue = parseInt(targetSpan.textContent.match(/\d+/)[0], 10);
• 重复触发控制：如果只需要提醒一次，记得在触发聚焦后停止轮询或断开观察者，避免频繁打扰用户。

内容的提问来源于stack exchange，提问作者medk