html5仿微信手机摇一摇代码_摇一摇抽奖js代码实现
2016-10-08 13:10:12  By: shinyuu

分享一个HTML5开发的手机端的摇一摇、整个Demo是仿微信的摇一摇功能的、当打开网页之后摇晃手机就会播放熟悉的声音、也就是会播放微信摇一摇的声音、2秒之后就会出来相应的广告信息、也就是摇动手机的结果、也是带有声音的哦、下面是整个Demo的gif效果

html摇一摇代码


整个Demo主要是使用的JS代码来控制的、并包涵了一些html代码和两个mp3文件、然后就是js代码了、css样式直接写到html文件里面的、大家可以根据自己的需求更改


Html代码

<div id="hand" class="hand"><img src="images/hand.png"></div>
    <div id="loading" class="loading">
        <span class="icon"></span>
        <span class="txt">正在努力的加载结果,请稍候~</span>
    </div>
    <div id="result" class="result">
        <div class="con">
            <div class="imgLeft">
                <img src="images/logo_com01.jpg">
            </div>
            <div class="contRight">
            <p class="mainTitle">DD博客</p>
            <p class="subTitle">你想要的代码都能有</p>
        </div>
    </div>
</div>


js监听摇晃动作

if (window.DeviceMotionEvent) {
    window.addEventListener(´devicemotion´, deviceMotionHandler, false);
} else {
    alert(´抱歉,你的手机配置实在有些过不去,考虑换个新的再来试试吧´);
}


deviceMotionHandler处理

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;
        var status = document.getElementById("status");

        if (speed > SHAKE_THRESHOLD) {
            
            
            doResult();
            times  ;
            
        }
        last_x = x;
        last_y = y;
        last_z = z;
    }
}


摇晃结果doResult函数
function doResult() {
    if(times>0){
        return false;
        }
    autoPlay();
    document.getElementById("result").className = "result";
    document.getElementById("loading").className = "loading loading-show";
    document.getElementById("hand").className = "hand hand-animate";
    
     setTimeout(function(){
        autoPlayed();
     }, 2500);
    
     setTimeout(function(){
        times=0;
        document.getElementById("result").className = "result result-show";
        document.getElementById("loading").className = "loading";
        document.getElementById("hand").className = "hand";
    }, 3000);
}


html5手机摇一摇代码源代码下载链接: 微信摇一摇js代码 密码: m4w1

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+