让我们一起爱米兰
站内搜搜:
移动设备
请扫描二维码
或访问
m.milan100.com
您所在的位置 -> 米兰百分百 -> JAVASCRIPT -> html5中javascript实现摇一摇

html5中javascript实现摇一摇

点击数:1242 发表时间:2015-11-20 14:42:50 作者: 来源链接:
分享到:
分享到微信
微信中的摇一摇抢红包的功能使用h5技术也能实现,原理是对重力感应事件进行监听,然后根据xyz摆动的数值来判断
var SHAKE_THRESHOLD = 3000;  //摇动的持续时间,此数值可调,单位毫秒
var last_update = 0;  
var x = y = z = last_x = last_y = last_z = 0;  
function init() {  
    if (window.DeviceMotionEvent) {  
        window.addEventListener('devicemotion', deviceMotionHandler, false); //重力感应监听 
    } else {  
        alert('not support mobile event');  //不支持重力感应,无法实现效果
    }  
}  

function deviceMotionHandler(eventData) {  
    var acceleration = eventData.accelerationIncludingGravity;  
    var curTime = new Date().getTime();  
    if ((curTime - last_update) > 100) {  
        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) {  
            alert("摇动了");  //可以播放一个音效
        }  
        last_x = x;  
        last_y = y;  
        last_z = z;  
    }  
}  

init();


0
很 好
0
一 般
0
差 劲
热门新闻
相关文章
上一篇: chrome和firefox浏览器渲染顺序和执行javascript的差别
下一篇: JavaScript(js)字符串替换函数replace的用法
评论区
匿名

返回首页 | 收藏本页 | 回到顶部
Copyright 2010. 米兰百分百 Powered By Bridge.
京ICP备15050557号