码迷,mamicode.com
首页 > 移动开发 > 详细

手机端 摇一摇功能 代码实现

时间:2016-12-28 17:43:09      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:and   速度   date   lis   cti   pre   data   事件   diff   

手机端网页上的摇一摇效果,js代码如下

var speed;
//判断手机是否有摇一摇功能
if (window.DeviceMotionEvent) {     //绑定devicemotion事件
    window.addEventListener(‘devicemotion‘,deviceMotionHandler, false);
}else{
    alert(‘您的设备不支持摇一摇功能,系统将自动为您摇动手机^_^‘);
    speed = 888;    //不支持摇一摇时,修改speed值触发摇动手机事件
}
//初始化
var SHAKE_THRESHOLD = 800;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;

function deviceMotionHandler(eventData) {

    var acceleration =eventData.accelerationIncludingGravity;

    var curTime = new Date().getTime();

    if ((curTime - last_update)> 300) {

        var diffTime = curTime -last_update;
        last_update = curTime;

        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;

        speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
        //speed = 888;
        //当速度高于阈值时
        if (speed > SHAKE_THRESHOLD) {
            alert("shaked!");
        }
        last_x = x;
        last_y = y;
        last_z = z;
    }
}

  

手机端 摇一摇功能 代码实现

标签:and   速度   date   lis   cti   pre   data   事件   diff   

原文地址:http://www.cnblogs.com/masual/p/6229601.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!