利用html5实现摇一摇换背景色和背景图片

时间：2015-1-15 作者：晨曦 分类： 无

var color = new Array('#f5f5f5', '#9D9D9D', 'black', '#FFA042', '#B766AD', '#00A600');

//随机变化的颜色代码

if(window.DeviceMotionEvent) {

var speed = 18;

//触动颜色改变的摇晃程度(阀值)，越小越易触动

var x = y = z = lastX = lastY = lastZ = 0;

//重置所有数值

window.addEventListener('devicemotion',function(){

//运动传感事件，需设备浏览器支持

var acceleration = event.accelerationIncludingGravity;

//将传感值赋给acceleration

x = acceleration.x;

y = acceleration.y;

if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {

//当x或y方向的变化超过上面的阀值，将触动变色

document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];

//指定需要变化背景色的位置，其中"6"为随机背景色的数量

}

lastX = x;

lastY = y;

}, false);

}

</script>

<span style="color:green;border-bottom:1px dashed grey;">♥摇一摇手机，换个背景色</span>