【转】利用js来实现微信摇一摇来自动更换网页背景的功能

微信推出后，他的摇一摇功能非常的火爆，没事来微信摇一摇加加好友，我们可不可以借鉴一下微信的摇一摇功能，让手机访问网页的时候，只要手机摇一摇，网页背景就会自动随时换一个网页背景。
具体想要用摇一摇的功能思路已经确认的了，现在就是来实现代码的了。我们现在是用javascript来实现摇一摇的功能。js摇一摇的代码如下：

http://www.itokit.com/2014/0115/75021.html

<span style="font-family:Microsoft YaHei;font-size:12px;"><script type="text/javascript">
var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff');
if(window.DeviceMotionEvent) {
    var speed = 25;
    var x = y = z = lastX = lastY = lastZ = 0;
    window.addEventListener('devicemotion', function(){
        var acceleration =event.accelerationIncludingGravity;
        x = acceleration.x;
        y = acceleration.y;
        if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
            document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
        }
        lastX = x;
        lastY = y;
    }, false);
}
</script>  </span>

=========================================================

用javascript实现手机摇一摇

<span style="font-family:Microsoft YaHei;font-size:12px;">if(navigator.userAgent.indexOf('iPhone')>-1)
{
    var SHAKE_THRESHOLD =2000;
}
else
{
    if(navigator.userAgent.indexOf('QQ')>-1)
    {
        var SHAKE_THRESHOLD =1000;
    }
    else
    {
        var SHAKE_THRESHOLD =4000;
    }

}

根据手机反应的不同SHAKE_THRESHOLD值可以设置为不同的值

var last_update = 0;
var x, y, z, last_x=0, last_y=0, last_z=0;

function deviceMotionHandler(eventData) {

    var acceleration =eventData.accelerationIncludingGravity;
    var curTime = new Date().getTime();

    if ((curTime - last_update)> 100) {
        var diffTime = parseInt(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;
    }
}

if (window.DeviceMotionEvent) {
            window.addEventListener('devicemotion',deviceMotionHandler, false);
    }
</span>

=================================================

HTML5一个重要特性就是DeviceOrientation，它将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。这个特性包括两种事件： 

1、 deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。 
2、 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。 使用它我们能够很容易的实现重力感应、指南针等有趣的功能，在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientation API的deviceOrientation事件来实现的。 其实它还能帮助我们在网页上实现一个手机应用里非常常见而时尚的功能：手机摇一摇。 DeviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴：x，y和z(示意如下图所示，x轴横向贯穿手机屏幕或者笔记本键盘，y轴纵向贯穿手机屏幕或笔记本键盘，z轴垂直于手机屏幕或笔记本键盘)。因为有些设备可能没有硬件来排除重力的影响，该事件会返回两个属性，accelerationIncludingGravity(含重力的加速度)和acceleration(加速度)，后者排除了重力的影响。

1. [代码]监听运动传感事件 
2. [代码]获取含重力的加速度 
3. [代码]核心方法实现代码 

HTML5一个重要特性就是DeviceOrientation，它将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。这个特性包括两种事件：

1、 deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。

2、 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。
使用它我们能够很容易的实现重力感应、指南针等有趣的功能，在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientation
API的deviceOrientation事件来实现的。

其实它还能帮助我们在网页上实现一个手机应用里非常常见而时尚的功能：手机摇一摇。

DeviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴：x，y和z(示意如下图所示，x轴横向贯穿手机屏幕或者笔记本键盘，y轴纵向贯穿手机屏幕或笔记本键盘，z轴垂直于手机屏幕或笔记本键盘)。因为有些设备可能没有硬件来排除重力的影响，该事件会返回两个属性，accelerationIncludingGravity(含重力的加速度)和acceleration(加速度)，后者排除了重力的影响。

1. [代码]监听运动传感事件 

<span style="font-family:Microsoft YaHei;font-size:12px;">if (window.DeviceMotionEvent) {
window.addEventListener(‘devicemotion’,deviceMotionHandler, false);
}</span>

2. [代码]获取含重力的加速度 

<span style="font-family:Microsoft YaHei;font-size:12px;">function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
}</span>

3. [代码]核心方法实现代码 

<span style="font-family:Microsoft YaHei;font-size:12px;">var SHAKE_THRESHOLD = xxx;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;

function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;

var curTime = newDate().getTime();

if ((curTime – lastUpdate)> 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(“shaked!”);
}
last_x = x;
last_y = y;
last_z = z;
}
}</span>