做一个会议计时器，剩多少变颜色到时响铃提醒

开会最容易拖，聊嗨了忘了看表，原定半小时开成一小时。我想要个计时器：设好时长就自己走，剩得多是绿色、快结束了变黄变红，时间一到"叮"一声催散会。纯前端，挂屏幕上谁都能看见。

一、倒计时 + 进度条

和刷题计时器同理，用结束时间戳差值算剩余，进度条映射比例：

let endTime = 0, dur = 0;
function start(min) {
  dur = min * 60;
  endTime = Date.now() + dur * 1000;
  requestAnimationFrame(tick);
}
function tick() {
  const remain = Math.max(0, (endTime - Date.now()) / 1000);
  bar.style.width = (remain / dur * 100) + '%';
  colorBy(remain / dur);            // 按剩余比例变色
  if (remain > 0) requestAnimationFrame(tick);
  else ring();
}

remain/dur 是剩余比例，直接当进度条宽度和变色依据。requestAnimationFrame 比 setInterval 更跟手，且停了就停，不空转。

二、颜色随剩余比例变

绿→黄→红三个档，给紧迫感：

function colorBy(ratio) {
  let c = '#2e9e5b';                       // 绿：还早
  if (ratio <= 0.25) c = '#d4564b';        // 红：最末四分之一
  else if (ratio <= 0.5) c = '#e0a92e';    // 黄：过半
  bar.style.background = c;
  timeText.style.color = c;
}

ratio 是剩余比例：大于一半绿色、小于一半黄色、最末四分之一红色。颜色和进度条、数字同步变，余光扫一眼就知道该收尾了，不用盯着数字读。

三、到时响铃

结束触发一声提示，复用 AudioContext 合成：

function ring() {
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const o = ctx.createOscillator(), g = ctx.createGain();
  o.connect(g); g.connect(ctx.destination);
  o.type = 'triangle'; o.frequency.value = 660;
  g.gain.setValueAtTime(0.4, ctx.currentTime);
  g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 1);
  o.start(); o.stop(ctx.currentTime + 1);
}

triangle 波形比 sine 更"脆"，像提醒铃。exponentialRampToValueAtTime 让声音一秒内衰减收尾，不刺耳。Web Audio 需用户先点过页面，倒计时一开始就该建好 ctx。

四、提醒方式对比

小结

会议计时器用结束时间戳差值算剩余，remain/dur 同时驱动进度条宽度和颜色：剩余过半绿、小于一半黄、最末四分之一红，紧迫感可视化；到点 AudioContext 合成三角波铃声催散会。requestAnimationFrame 跟手且不空转。挂屏幕上，会议拖不拖一眼加一声铃就能兜住。