js如何實現手機呼叫震動功能
本章節介紹一下,如何實現手機呼叫震動功能。
最好事先檢查一下當前瀏覽器是否支援震動功能,下面就是檢測的方法:
[JavaScript] 純文字檢視 複製程式碼// Standards ftw! var supportsVibrate = "vibrate" in navigator;
在window.navigator物件裡就只有一個關於振動的API:vibrate。
振動API基礎應用:
navigator.vibrate函式可以接受一個數字引數,也可以接受一個數字陣列。
當使用陣列引數時,奇數位的數值是震動秒數,偶數位為等待秒數。
[JavaScript] 純文字檢視 複製程式碼// 振動1秒 navigator.vibrate(1000); // 振動多次 // 引數分別是震動3秒,等待2秒,然後振動1秒 navigator.vibrate([3000, 2000, 1000]);
如果想停止震動,你只需要向navigator.vibrate方法裡傳入0,或一個空陣列:
[JavaScript] 純文字檢視 複製程式碼// 停止振動 navigator.vibrate(0); navigator.vibrate([]);
需要提醒的是,對navigator.vibrate方法的呼叫並不會引起手機迴圈振動;當引數是一個數字時,振動之後發生一次,然後就停止下來。當引數是陣列時,震動會按陣列裡的值震動,然後就停止振動。
持續震動:
我們可以簡單的使用setInterval 和 clearInterval 方法產生讓手機持續震動的效果:
[JavaScript] 純文字檢視 複製程式碼var vibrateInterval; // Starts vibration at passed in level function startVibrate(duration) { navigator.vibrate(duration); } // Stops vibration function stopVibrate() { // Clear interval and stop persistent vibrating if(vibrateInterval) clearInterval(vibrateInterval); navigator.vibrate(0); } // Start persistent vibration at given duration and interval // Assumes a number value is given function startPeristentVibrate(duration, interval) { vibrateInterval = setInterval(function() { startVibrate(duration); }, interval); }
這段程式碼只是針對振動引數是一個數字的情況,如果引數是陣列,你還需要計算一下它的總共持續時間,然後根據它的特徵來進行迴圈。
使用振動(Vibration) API的場景:
這個API顯然是針對移動手機裝置的。當開發手機WEB移動應用時,它是一個很好的警示工具,當在開發Web遊戲或多媒體應用時,這個振動功能更是不可或缺的好技術。比如說,當使用者在用一個手機玩你的WEB遊戲時,當遊戲中發生爆炸,而你讓手機也跟隨著振動,是不是一種很出色的使用者體驗。
相關文章
- VM中實現手機震動功能的類
- js實現手機網頁滑動JS網頁
- Python手機開發呼叫DLL實現部分ADB功能Python
- asp.net WebService實現跨域js呼叫功能實現ASP.NETWeb跨域JS
- Ruby如何實現動態方法呼叫
- Laravel 如何實現既能靜態呼叫,又能動態呼叫Laravel
- 臭名昭著的手機驗證碼功能是如何實現的
- PHP 如何通過 JSON-RPC 呼叫實現以太坊互動PHPJSONRPC
- PHP 如何透過 JSON-RPC 呼叫實現以太坊互動PHPJSONRPC
- PHP如何呼叫實現奇亞(Chia)互動[支援XCH]PHP
- 手動實現一個JS執行引擎JS
- JS實現線上ps功能JS
- 原生js實現拖拽功能JS
- js實現複製功能JS
- 微信小程式如何實現自動退款功能?微信小程式
- Android QMUI實戰:實現APP換膚功能,並自動適配手機深色模式AndroidUIAPP模式
- 動手實現程式碼虛擬機器虛擬機
- 如何使用原生 JS 實現一個文字劃線功能JS
- JS如何實現點選複製功能,JS點選複製文字JS
- Windows Phone 7 開發 31 日談——第12日:使手機震動Windows
- 如何用JavaScript手動實現一個棧JavaScript
- 安卓呼叫PrinterShare實現無線列印功能安卓
- js實現的手機介面拼圖解鎖效果JS圖解
- 用原生 JS 實現 innerHTML 功能JSHTML
- JS實現發郵件功能JS
- js元素的震動效果程式碼例項JS
- js實現的拖動改變視窗大小功能JS
- 如何在jsp上實現報表編輯器功能?JS
- 手動實現KVO
- 手動實現PromisePromise
- HTML5呼叫手機發簡訊和打電話功能HTML
- Android Studio 呼叫Camera實現拍照功能Android
- PHP 如何呼叫實現波場互動[支援TRX/TRC20]PHP
- 技術分享| 基於RTM 實現的呼叫邀請如何新增推送功能?
- 原生js實現商品排序功能JS排序
- vuejs 實現jq 克隆的功能VueJS
- js實現電子簽名功能JS
- jsp分頁功能的實現JS