html5 利用重力感应实现摇一摇换颜色可用来做抽

我发现了一个绝妙的案例，这个案例通过摇一摇手机就能更换背景颜色，简直太棒了！但在实际测试后，需要注意以下几点：

此功能仅适用于iOS系统或安卓4.0及以上版本。如果你使用的设备系统版本较低，可能无法实现这一功能。

如果在代码中加入了z坐标的判断，可能会出现屏幕颜色乱变的情况。我怀疑可能是因为过于敏感，或者是我没有正确使用。在此，我恳请各位专家指点迷津。

我突发奇想，其实只需稍作修改，这个摇一摇换色的功能就能变成一种新颖的抽奖方式。相比传统的大转盘、刮刮卡，这种方式无疑更具时尚感。只需稍作调整代码逻辑，即可实现。下面就是这段代码：

```javascript

var colorArray = ['red', 'blue', 'yellow', 'green', '00f', '0ff']; // 颜色数组，可根据需要添加更多颜色

if (window.DeviceMotionEvent) { // 检查设备是否支持摇一摇事件

var speedThreshold = 25; // 设置摇动的速度阈值

var lastX = lastY = lastZ = 0; // 初始化坐标值

var acceleration; // 存储加速度信息对象

window.addEventListener('devicemotion', function(event) { // 添加摇一摇事件监听器

acceleration = event.accelerationIncludingGravity; // 获取加速度信息

var currentX = acceleration.x; // 当前x轴加速度值

var currentY = acceleration.y; // 当前y轴加速度值（注意：z轴加速度值在某些设备上可能不可用）

if (Math.abs(currentX - lastX) > speedThreshold || Math.abs(currentY - lastY) > speedThreshold) { // 判断摇晃幅度是否达到阈值

document.body.style.backgroundColor = colorArray[Math.round(Math.random() colorArray.length)]; // 随机更换背景颜色

}

lastX = currentX; // 更新坐标值以便下一次计算差值

lastY = currentY; // 更新坐标值以便下一次计算差值（z轴更新略）至此结束。通过这段简单的代码即可实现手机摇一摇切换背景色的功能。只需要稍作调整逻辑即可将其变为抽奖方式，非常实用且时尚！感兴趣的朋友可以尝试一下哦！}）; } else { console.log('设备不支持摇一摇功能'); } `这段代码非常简单实用，感兴趣的朋友不妨尝试一下！如果你有任何疑问或建议，欢迎随时与我交流。期待你的反馈！