如何使用JavaScript实现计数器达到指定数值时触发手机震动

核心逻辑说明 #

直接使用HTML5原生的Vibration API实现手机震动效果，该API兼容绝大多数移动端浏览器，不需要引入额外依赖。触发逻辑直接嵌入现有点击计数流程即可，修改成本极低。
需要注意：目前浏览器规范要求震动只能在用户主动交互的场景下触发，你的需求是点击时触发，完全符合该限制，不会出现失效问题。

修改后的完整JS代码 #

var clicks = 0;
// 震动触发阈值，可根据需求自行修改数值
const VIBRATE_THRESHOLD = 10;

// extracted this for DRYness
function displayClicks() {
  document.getElementById("clicks").innerHTML = clicks;
}

// 封装震动函数，自动做兼容性判断
function triggerVibrate(duration = 200) {
  if ("vibrate" in navigator) {
    navigator.vibrate(duration);
    // 如果需要多次震动效果，可以替换为数组参数，例：navigator.vibrate([200, 100, 200]) 代表震200ms、停100ms、再震200ms
  }
}

function onSelect() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML = x;
  // simply reset the clicks and rerender them
  clicks = 0;
  displayClicks();
};


function onClick() {
  clicks += 1;
  displayClicks();
  // 计数达到阈值时触发震动
  if (clicks === VIBRATE_THRESHOLD) {
    triggerVibrate();
    // 如果需要每满10次就震一次，不是只震一次，可以在这里加一行 clicks = 0; 重置计数，或者把判断条件改为 clicks % VIBRATE_THRESHOLD === 0
  }
};

可选调整说明 #

• 可修改VIBRATE_THRESHOLD常量的数值，自定义触发震动的计数阈值
• 可修改triggerVibrate的入参调整震动时长，默认是200毫秒
• 原HTML代码不需要做任何修改，直接替换JS部分即可生效

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