js+html怎样实现Andriod重力感应触发

JavaScript034

js+html怎样实现Andriod重力感应触发,第1张

var con = document.getElementById("con")

 

(function(){

    // 监听运动传感事件，查看是否支持硬件运动

    if (window.DeviceMotionEvent) {

        window.addEventListener('devicemotion', deviceMotionHandler, false)

    } else {

        alert("您的设备不支持硬件调用")

    }

 

    // 变量初始化

    var x = 0,

     y = 0,

     z = 0,

    lastX = 0,

    lastY = 0,

    lastZ = 0,

curTime = 0,

lastTime = 0,

diffTime = 0,

    speed = 0

 

    // 设置一个阀值

    var SHAKE_THRESHOLD = 800 // 设定摇晃的阈值为600 运行相应操作

 

    /*

     * 功能：测算三个方向重力加速度，达到一定值进行相应操作

     * 作者：HTML5学堂、刘国利、陈能堡

     *

     */

    function deviceMotionHandler(eventData){

        var acceleration = eventData.accelerationIncludingGravity

 

        // 获取当前时间

        curTime = new Date().getTime()

        // 计算时间差，当这个差值大于一定值执行计算三个方向的速度

        if ((curTime - lastTime) > 100) {

            // 记录上一次的时间

            diffTime = curTime - lastTime

            lastTime = curTime

 

            // 获取当前三个方向的值

            x = acceleration.x

            y = acceleration.y

            z = acceleration.z

 

            // 计算速度，为了防止出现负数，进行绝对值

            speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 8000)

            if (speed > SHAKE_THRESHOLD) {

                alert("我实现摇一摇了")

            }

 

            // 记录上一次三个方向的值

            lastX = x

            lastY = y

            lastZ = z                    

        }

    }

})()

资料来源HTML5学堂。

1.addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作；

2.所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最有这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序；

3.由于IE只支持事件冒泡，所以同大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器；

最好只在需要在是事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，不建议在事件捕获阶段注册事件处理程序。