新手如何用Bookmarklet捕获网页指定按钮点击并启动计时器？

嘿，作为编程新手，用Bookmarklet实现这个需求其实比你想的简单！我给你一步步拆解，保证你能看懂：

第一步：获取目标按钮的选择器 #

你得先告诉代码要监听哪个按钮。打开目标网页，右键你要捕获的按钮，选择「检查」（Chrome/Firefox都有这个选项），在弹出的开发者工具「元素」面板里，找到对应按钮的HTML标签，右键它→「复制」→「复制选择器」。比如复制出来可能是button.submit-btn或者#login-button，这个就是我们要用到的选择器。

第二步：完整的Bookmarklet代码（可直接用） #

我已经帮你写好了核心逻辑，你只需要把代码里的'button#target-btn'替换成你刚才复制的选择器就行：

展开版代码（方便理解）

// 找到目标按钮
const targetButton = document.querySelector('button#target-btn');
if (!targetButton) {
  alert('没找到目标按钮，请检查选择器是否正确！');
  return;
}

// 计时器相关变量
let startTime = null;
let timerInterval = null;

// 创建一个悬浮的计时显示框
const timerDisplay = document.createElement('div');
timerDisplay.style.cssText = `
  position: fixed;
  top: 10px;
  right: 10px;
  background: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 9999;
`;
document.body.appendChild(timerDisplay);

// 按钮点击的处理函数：第一次点击启动，第二次停止
function handleClick() {
  if (!startTime) {
    // 启动计时器
    startTime = Date.now();
    timerInterval = setInterval(() => {
      const elapsedSeconds = Math.floor((Date.now() - startTime) / 1000);
      const minutes = Math.floor(elapsedSeconds / 60);
      const seconds = elapsedSeconds % 60;
      timerDisplay.textContent = `已计时：${minutes}分${seconds.toString().padStart(2, '0')}秒`;
    }, 1000);
    alert('计时器已启动！');
  } else {
    // 停止计时器
    clearInterval(timerInterval);
    const totalSeconds = Math.floor((Date.now() - startTime) / 1000);
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;
    timerDisplay.textContent = `计时结束：${minutes}分${seconds.toString().padStart(2, '0')}秒`;
    startTime = null;
    alert(`计时结束，总时长：${minutes}分${seconds}秒`);
  }
}

// 给按钮绑定点击事件
targetButton.addEventListener('click', handleClick);
alert('已成功绑定！点击目标按钮即可启动/停止计时器');

压缩版（直接粘贴到书签）

把上面的代码压缩成一行（书签不支持换行），替换好选择器后用这个：

javascript:(function(){const e=document.querySelector('button#target-btn');if(!e)return void alert('没找到目标按钮，请检查选择器是否正确！');let t=null,n=null;const o=document.createElement('div');o.style.cssText='position:fixed;top:10px;right:10px;background:#333;color:white;padding:8px 12px;border-radius:4px;font-size:14px;z-index:9999';document.body.appendChild(o);function i(){t?(clearInterval(n),t=Math.floor((Date.now()-t)/1000),alert(`计时结束，总时长：${Math.floor(t/60)}分${t%60}秒`),o.textContent=`计时结束：${Math.floor(t/60)}分${(t%60).toString().padStart(2,'0')}秒`,t=null):(t=Date.now(),n=setInterval(()=>{const e=Math.floor((Date.now()-t)/1000);o.textContent=`已计时：${Math.floor(e/60)}分${(e%60).toString().padStart(2,'0')}秒`},1e3),alert('计时器已启动！'))}e.addEventListener('click',i),alert('已成功绑定按钮点击事件，现在点击目标按钮即可启动/停止计时器！')})();

第三步：把代码变成书签 #

1. 打开浏览器的书签管理器（Chrome按Ctrl+Shift+O，Firefox按Ctrl+B）
2. 点击「新建书签」，名称随便填（比如「按钮计时器」）
3. 把压缩版代码粘贴到「网址」输入框里
4. 保存书签，搞定！

关键细节说明 #

• 选择器替换：一定要把代码里的button#target-btn换成你复制的选择器，不然代码找不到按钮。
• 计时器逻辑：第一次点击按钮启动计时，第二次点击停止，右上角会显示实时时长，结束时会弹出总时长。
• 动态按钮的情况：如果你的按钮是页面加载后才动态出现的（比如某些单页应用），上面的代码可能找不到按钮。这时候可以用MutationObserver监听DOM变化，等按钮出现后再绑定事件，要是你需要这个功能，我可以再给你补充代码~

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