js模仿微信摇一摇功能

来源：互联网发布：手机淘宝分享爱逛街编辑：程序博客网时间：2024/05/16 07:12

这里介绍的只是实现摇一摇的原理以及一些主要的代码，具体界面不做描述

HTML代码

<audio id="musicBox" src=""></audio>

JS代码

init();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("摇动了，播放");            var media = document.getElementById("musicBox"); //获取音频控件            media.setAttribute("src", "imgy/shake_sound.mp3");            media.load(); //加载音频            media.play(); //播放音频         }        last_x = x;        last_y = y;        last_z = z;    }}

1 0