html5 navigator 手机震动,js实现手机震动

最新推荐文章于 2025-09-05 00:15:00 发布

原创最新推荐文章于 2025-09-05 00:15:00 发布 · 1.5w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #手机 #javascript #navigator #js实现手机震动

web前端同时被 2 个专栏收录

4 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

本文介绍了使用HTML5的navigator.vibrate接口来实现手机震动功能，通过分享index.html中的代码示例和shake.js插件的使用，探讨了这一技术的实际应用。需要注意的是，该功能可能在某些设备或浏览器上不被支持，特别是在iPhone上。

html5 navigator 的 vibrate实现手机震动

主要用到的代码

//if phone support navigator.vibrate
        if (navigator.vibrate) {
            //vibrate 1 second
            navigator.vibrate(1000);
        } else if (navigator.webkitVibrate) {
            navigator.webkitVibrate(1000);
        }

代码块

index.html 实现调用shake.js和实现手机震动的功能：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Shake.js</title>
<style type="text/css">
body {
    background: #E9E9E9;
    color: #333;
    font: 1em/1.3em "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; /* 16px / 21px */
    text-shadow: rgba(255,255,255,0.8) 0 1px 0;
    text-align: center;
}
</style>
<script type="text/javascript" src="shake.js"></script>
</head>
<body>

<h1>Shake to Undo</h1>
<h2>for your mobile web app</h2>

<p>Shake your iPhone/iPad to see a custom action.</p>
<p>Works on iOS +4.2.1, Android 4.0.3 (default browser), Opera Mobile (Android), BlackBerry PlayBook 2.0</p>

<p><a href="http://dev.w3.org/geo/api/spec-source-orientation">W3C DeviceOrientation Event Specification</a></p>

<script>
window.onload = function() {

    //create a new instance of shake.js.
    var myShakeEvent = new Shake({
        threshold: 15
    });

    // start listening to device motion
    myShakeEvent.start();

    // register a shake event
    window.addEventListener('shake', shakeEventDidOccur, true);

    //shake event callback
    function shakeEventDidOccur () {
        //if phone support navigator.vibrate
        if (navigator.vibrate) {
            //vibrate 1 second
            navigator.vibrate(1000);
        } else if (navigator.webkitVibrate) {
            navigator.webkitVibrate(1000);
        }
        //put your own code here etc.
        alert('Shake!');

    }
};
</script>
</body>
</html>

shake.js 这个是一个js插件,可以在下面的github里下载到原版的

    /*
 * Author: Alex Gibson
 * https://github.com/alexgibson/shake.js
 * License: MIT license
 */

(function(global, factory) {
    if (typeof define === 'function' && define.amd) {
        define(function() {
            return factory(global, global.document);
        });
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = factory(global, global.document);
    } else {
        global.Shake = factory(global, global.document);
    }
} (typeof window !== 'undefined' ? window : this, function (window, document) {

    'use strict';

    function Shake(options) {
        //feature detect
        this.hasDeviceMotion = 'ondevicemotion' in window;

        this.options = {
            threshold: 15, //default velocity threshold for shake to register
            timeout: 1000 //default interval between events
        };

        if (typeof options === 'object') {
            for (var i in options) {
                if (options.hasOwnProperty(i)) {
                    this.options[i] = options[i];
                }
            }
        }

        //use date to prevent multiple shakes firing
        this.lastTime = new Date();

        //accelerometer values
        this.lastX = null;
        this.lastY = null;
        this.lastZ = null;

        //create custom event
        if (typeof document.CustomEvent === 'function') {
            this.event = new document.CustomEvent('shake', {
                bubbles: true,
                cancelable: true
            });
        } else if (typeof document.createEvent === 'function') {
            this.event = document.createEvent('Event');
            this.event.initEvent('shake', true, true);
        } else {
            return false;
        }
    }

    //reset timer values
    Shake.prototype.reset = function () {
        this.lastTime = new Date();
        this.lastX = null;
        this.lastY = null;
        this.lastZ = null;
    };

    //start listening for devicemotion
    Shake.prototype.start = function () {
        this.reset();
        if (this.hasDeviceMotion) {
            window.addEventListener('devicemotion', this, false);
        }
    };

    //stop listening for devicemotion
    Shake.prototype.stop = function () {
        if (this.hasDeviceMotion) {
            window.removeEventListener('devicemotion', this, false);
        }
        this.reset();
    };

    //calculates if shake did occur
    Shake.prototype.devicemotion = function (e) {
        var current = e.accelerationIncludingGravity;
        var currentTime;
        var timeDifference;
        var deltaX = 0;
        var deltaY = 0;
        var deltaZ = 0;

        if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) {
            this.lastX = current.x;
            this.lastY = current.y;
            this.lastZ = current.z;
            return;
        }

        deltaX = Math.abs(this.lastX - current.x);
        deltaY = Math.abs(this.lastY - current.y);
        deltaZ = Math.abs(this.lastZ - current.z);

        if (((deltaX > this.options.threshold) && (deltaY > this.options.threshold)) || ((deltaX > this.options.threshold) && (deltaZ > this.options.threshold)) || ((deltaY > this.options.threshold) && (deltaZ > this.options.threshold))) {
            //calculate time in milliseconds since last shake registered
            currentTime = new Date();
            timeDifference = currentTime.getTime() - this.lastTime.getTime();

            if (timeDifference > this.options.timeout) {
                window.dispatchEvent(this.event);
                this.lastTime = new Date();
            }
        }

        this.lastX = current.x;
        this.lastY = current.y;
        this.lastZ = current.z;

    };

    //event handler
    Shake.prototype.handleEvent = function (e) {
        if (typeof (this[e.type]) === 'function') {
            return this[e.type](e);
        }
    };

    return Shake;
}));