javascript实现手机震动API代码-前端开发

很好，下面是详细讲解 JavaScript 实现手机震动 API 代码的完整攻略：

很好，下面是详细讲解 JavaScript 实现手机震动 API 代码的完整攻略：

1. 确认浏览器支持性

首先需要确认浏览器是否支持 Vibration API（震动 API）。可以通过以下代码来检测：

// 判断浏览器是否支持 Vibration API（震动 API）
if ("vibrate" in navigator) {
  console.log("Vibration API is supported!");
} else {
  console.log("Vibration API is not supported.");
}

2. 操作手机震动

要操作手机的震动功能，需要使用 navigator.vibrate() 方法。这个方法可以接收一个整数、浮点数或整数数组作为参数，参数表示震动时间（单位是毫秒）。如果传入一个整数，那么手机将会以该时间震动一次；如果传入一个浮点数，那么手机将会不断震动，直到时间到；如果传入一个整数数组，则可以让手机按照数组中所列的时间轮流震动。

以下是 navigator.vibrate() 方法的用法：

// 震动 200 毫秒
navigator.vibrate(200);

// 不停震动
navigator.vibrate(1000);

// 按照 [100, 200, 300] 毫秒的时间依次震动
navigator.vibrate([100, 200, 300]);

3. 示例说明

示例一：点击按钮就震动

在这个示例中，我们需要在页面中放置一个按钮，点击它后手机将会震动。

首先，在 HTML 中添加一个按钮：

<button id="vibrate-btn">震动一下</button>

然后，在 JavaScript 中获取按钮，并为它添加点击事件：

// 获取按钮元素
var vibrateBtn = document.getElementById("vibrate-btn");

// 为按钮添加点击事件
vibrateBtn.addEventListener("click", function() {
  // 震动 200 毫秒
  navigator.vibrate(200);
});

按钮被点击时，navigator.vibrate(200) 方法会被调用，这会使手机震动 200 毫秒。

示例二：计时器到期时震动

在这个示例中，我们需要设置一个计时器，在时间到期（比如 10 秒后）时，手机将会震动。

首先，在 HTML 中添加一个显示倒计时的元素：

<div id="countdown">10</div>

然后，在 JavaScript 中设置计时器：

// 获取倒计时元素
var countdownEl = document.getElementById("countdown");

// 开始计时器
var countdownInterval = setInterval(function() {
  var countdown = countdownEl.innerHTML;

  // 倒计时减 1
  countdown--;

  // 更新倒计时
  countdownEl.innerHTML = countdown;

  // 如果倒计时为 0，就停止计时器并震动一下
  if (countdown === 0) {
    clearInterval(countdownInterval);
    navigator.vibrate(200);
  }
}, 1000);