zoukankan      html  css  js  c++  java
  • html5手机摇一摇

    var SHAKE_THRESHOLD = 3000;
                var last_update = 0;
                var x = y = z = last_x = last_y = last_z = 0;
                var num=0;
                var media;
    
                function init() {
                    last_update = new Date().getTime();
                    media = document.getElementById("musicBox");
                    if (window.DeviceMotionEvent) {
                        window.addEventListener('devicemotion', deviceMotionHandler, false);
                    } else {
    
                        alert("不支持手机事件!");
                    }
                }
    
    
                function _animate(){
                    
                    var up=document.getElementById("up");
                    var down=document.getElementById("down");
                    var offset=up.offsetHeight/2;
                    up.style.webkitTransform="translateY("+(-offset)+"px)";
                    down.style.webkitTransform="translateY("+(offset)+"px)";
                    
                    setTimeout(function(){
                        up.style.webkitTransform="";
                        down.style.webkitTransform="";
                    },500)
                }
    
                function deviceMotionHandler(eventData) {
                    
                    //accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),后者排除了重力的影响。
                    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) {
                            if (!media.src) {
                                media.src = "weixin_yaoyiyao.mp3";
                            }
                            media.play();
                            _animate();
                            num++;
                            document.getElementById("num").innerHTML=num;
                        }
                        last_x = x;
                        last_y = y;
                        last_z = z;
                    }
    
                }
            window.onload=init;

     完整例子下载

  • 相关阅读:
    gojs常用API-画布定义
    页面开发的标准
    iis7.5做反向代理配置方法实例图文教程
    Tomcat实现反向代理
    nodejs的package.json依赖dependencies中 ^ 和 ~ 的区别
    dependencies与devDependencies的区别
    常见的cmd命令
    解决SecureCRT中文显示乱码
    ASP防XSS代码
    Android页面之间进行数据回传
  • 原文地址:https://www.cnblogs.com/lihui1030/p/3787988.html
Copyright © 2011-2022 走看看