在本教學中，我們將探索如何使用 JavaScript 觸發智慧型手機上的震動功能。此功能對於創建更具互動性和響應性的 Web 應用程式非常有用，特別是在針對行動用戶時。讓我們深入了解如何有效實施這一點的細節。
振動 API 是現代網頁瀏覽器中提供的簡單且強大的功能，可讓您控制裝置的振動功能。此 API 主要用於行動設備，因為大多數桌面設備沒有振動功能。
API 很簡單，由一個方法組成：navigator.vibrate()。呼叫此方法時，會觸發裝置振動指定的持續時間。
vibrate() 方法的語法如下：
navigator.vibrate(pattern);
這裡，模式可以是：
例如：
// Vibrate for 500 milliseconds navigator.vibrate(500); // Vibrate for 200ms, pause for 100ms, then vibrate for 200ms again navigator.vibrate([200, 100, 200]);
讓我們從一個基本範例開始，當使用者點擊按鈕時我們會觸發振動。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vibration API Example</title>
</head>
<body>
<button onclick="navigator.vibrate(300)">Vibrate</button>
</body>
</html>
在此範例中，按一下按鈕將使裝置振動 300 毫秒。
您可以使用數字數組來建立更複雜的振動模式。數組中的每個奇數索引定義振動持續時間，每個偶數索引定義暫停。
<button onclick="navigator.vibrate([100, 50, 100, 50, 300])">Vibrate Pattern</button>
在此範例中，手機將以以下模式振動：100ms 振動、50ms 暫停、100ms 振動、50ms 暫停、300ms 振動。
要停止目前正在進行的振動，您可以使用值為 0 或空數組呼叫 vibrate() 方法：
navigator.vibrate(0); // Or navigator.vibrate([]);
並非所有瀏覽器或裝置都支援振動 API。在使用振動功能之前，最好檢查一下 API 是否受支援：
if ("vibrate" in navigator) {
console.log("Vibration API is supported");
} else {
console.log("Vibration API is not supported");
}
JavaScript 中的振動 API 是增強 Web 應用程式互動性的一種簡單而有效的方法，特別是對於行動用戶而言。無論您是在創建遊戲、建立通知，還是只是在 UI 中添加一點風格，觸發振動的能力都可以顯著提高用戶參與度。請記住要謹慎使用此功能，以確保積極的用戶體驗。
電報頻道：
https://t.me/Free_Programmers
以上是如何使用 JavaScript 讓手機震動的詳細內容。更多資訊請關注PHP中文網其他相關文章！
