JavaScript 中怎么调用设备震动 API 实现手机震动效果-js教程-PHP中文网

javascript调用设备震动需满足用户交互触发且设备支持，使用navigator.vibrate()方法：传数字表示毫秒时长，传数组实现多段震动（总长≤5000ms），须https环境并检测兼容性。

javascript 中怎么调用设备震动 api 实现手机震动效果

JavaScript 中调用设备震动 API 需使用 navigator.vibrate() 方法，但必须满足两个前提：页面处于**用户交互触发的上下文**（如点击、触摸事件中），且设备支持该功能（主要是 Android 和部分 iOS 设备）。

✅ 基本用法：传入震动时长（毫秒）

最简单的调用方式是传入一个数字，表示震动持续时间（单位毫秒）：

button.addEventListener('click', () => {
  if ('vibrate' in navigator) {
    navigator.vibrate(200); // 震动 200 毫秒
  }
});

注意：iOS Safari 从 iOS 15.4 起才支持该 API，且仅在用户手势触发时生效；旧版 iOS 完全不支持。

⏱️ 进阶控制：传入数组实现多段震动模式

传入数组可定义更复杂的震动序列，格式为 [开, 关, 开, 关, ...]，单位均为毫秒：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

navigator.vibrate([100, 50, 100])：震动 100ms → 停 50ms → 震动 100ms
navigator.vibrate([200, 100, 200, 100, 200])：模拟“短-长-短”提示音节奏

⚠️ 注意：总时长不能超过 5000ms（5 秒），超出部分会被截断；若传入 0 或空数组（[]），会停止当前震动。

? 兼容性与检测建议

不是所有浏览器都支持，务必先检测再调用：

function triggerVibration(duration = 150) {
  if (!('vibrate' in navigator)) return false;
  
  try {
    // iOS 需要确保在用户手势回调内调用，且不能延迟
    const success = navigator.vibrate(duration);
    return success !== false; // 返回 true 表示调用成功（部分浏览器返回 undefined）
  } catch (e) {
    return false;
  }
}

// 使用示例
document.getElementById('vibe-btn').addEventListener('touchstart', () => {
  triggerVibration(100);
});

? 小技巧：安卓通常响应良好；iOS 更严格，推荐搭配 touchstart 或 click 直接触发，避免放在 setTimeout 或异步回调中。