H5+js實現搖晃手機，手機震動

阿新 • • 發佈：2019-01-18

HTML5一個重要特性就是DeviceOrientation，它將底層的方向感測器和運動感測器進行了高階封裝，提供了DOM事件的支援。這個特性包括兩種事件：

1、 deviceOrientation：封裝了方向感測器資料的事件，可以獲取手機靜止狀態下的方向資料，例如手機所處角度、方位、朝向等。

2、 deviceMotion：封裝了運動感測器資料的事件，可以獲取手機運動狀態下的運動加速度等資料。使用它我們能夠很容易的實現重力感應、指南針等有趣的功能，在手機上將非常有用。例如Opera H5體驗版裡的重力感應球示例就是通過監聽DeviceOrientation API的deviceOrientation事件來實現的。其實它還能幫助我們在網頁上實現一個手機應用裡非常常見而時尚的功能：手機搖一搖。

DeviceMotionEvent(裝置運動事件)返回裝置有關於加速度和旋轉的相關資訊。加速度的資料將包含三個軸：x，y和z(示意如下圖所示，x軸橫向貫穿手機螢幕或者筆記本鍵盤，y軸縱向貫穿手機螢幕或筆記本鍵盤，z軸垂直於手機螢幕或筆記本鍵盤)。因為有些裝置可能沒有硬體來排除重力的影響，該事件會返回兩個屬性，accelerationIncludingGravity(含重力的加速度)和acceleration(加速度)，後者排除了重力的影響。

<!DOCTYPE html>
<html>
<head>

    <title></title 
>
</head>
<body>
<div>搖晃手機，手機震動</div>
</body>
<script type="text/javascript">

//運動事件監聽
if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion',deviceMotionHandler,false);
}

//獲取加速度資訊
//通過監聽上一步獲取到的x, y, z 值在一定時間範圍內的變化率，進行裝置是否有進行晃動的判斷。
//而為了防止正常移動的誤判，需要給該變化率設定一個合適的臨界值。 

var SHAKE_THRESHOLD = 4000;
var last_update = 0;
var x, y, z, last_x = 0, last_y = 0, last_z = 0;
function deviceMotionHandler(eventData) {
        var acceleration =eventData.accelerationIncludingGravity;
        var curTime = new Date().getTime();
        if ((curTime-last_update)> 10) {
            var diffTime = curTime -last_update;
            last_update = curTime;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
            if (speed > SHAKE_THRESHOLD) {
                vibration();  // Do something
            }
            last_x = x;
            last_y = y;
            last_z = z;
        }
}
function vibration(){
    navigator.vibrate = navigator.vibrate
               || navigator.webkitVibrate
               || navigator.mozVibrate
               || navigator.msVibrate;

       if (navigator.vibrate) {
           // 支援
           console.log("支援裝置震動！");
       }
       //中括號裡面的值標示[震動時間，停止時間，震動時間，停止時間………..]。沒有錯就是這種規律，簡單明瞭
     navigator.vibrate([500, 300, 400,300]);
}
</script>
</html>

H5+js實現搖晃手機，手機震動

H5+js實現搖晃手機，手機震動

原生js實現outerWidth()方法，用到getComputedStyle

JS實現並集，交集和差集

登陸一個系統時，前端js實現的驗證，記住密碼等功能

關於js實現微信，QQ，微博分享的總結

js實現蕨類植物葉子，葉子分形圖形

Js實現抽獎轉盤，和點選返回某個模組頂部的功能

線上選課案例—通過js實現全選，全不選和多選效果。順便談談理解的半吊子flag這個變數

js實現快速排序，二分查詢（詳解，一次學會）

html，css，js實現音樂播放，含音訊特效和歌詞

用HTML，js實現單選題，多選題，計分，報題功能

高德地圖web js實現畫多邊形，圓。判斷一個點是否在多邊形或圓裡

js實現遞迴，尾遞迴（遞迴優化），防止棧溢位

html5+css+js實現動畫特效，人物動畫

Jquery、Js實現網頁列印，及列印樣式的自定義

使用textSearch.js實現關鍵詞搜尋，並搜尋結果高亮顯示

JS 實現MD5加密，以及發現的JS對字元的處理、替換等

js實現批量刪除，編輯操作

JS實現複製功能，相容各大主流瀏覽器複製神器 ZeroClipboard

js實現全選，全不選，反選，批量刪除等（Yii）

H5+js實現搖晃手機，手機震動

相關推薦