知识问答
如何在手机网站上利用HTML5的DeviceOrientation接口实现摇一摇功能？
2025-09-21 15:06:19
来源：互联网转载
``
html，，，，， if (window.DeviceOrientationEvent) {， window.addEventListener('deviceorientation', function(event) {， var threshold = 30; // 设置阈值， if (Math.abs(event.beta) > threshold || Math.abs(event.gamma) > threshold) {， // 摇一摇触发的事件， console.log('手机摇一摇');， }， });， } else {， console.log('当前浏览器不支持DeviceOrientation');， }，，，，，，``HTML5 DeviceOrientation 是一个强大的特性，它允许开发者访问设备的方向传感器和运动传感器数据，通过这些数据，可以开发出许多有趣的功能，比如重力感应、指南针等，在手机网页上实现“摇一摇”功能就是其中一个典型应用，下面将详细介绍如何使用 HTML5 DeviceOrientation 实现手机网站摇一摇功能的代码实例：
代码实例
<!DOCTYPE html><html lang="zhCN"><head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>摇一摇示例</title> <ｓｃｒｉｐｔ src="https://code.jquery.com/jquery3.6.0.min.js"></ｓｃｒｉｐｔ> <style> body { fontsize: 20px; margin: 10px; } #yaoyiyaono { display: none; lineheight: 35px; } #yaoyiyaoyes { display: none; lineheight: 50px; } #yaoyiyaoresult { display: none; lineheight: 50px; } </style></head><body> <p id="yaoyiyaono">兄弟，如果您看到了我，说明您现在还不能摇，不是说您没有资格用我，而是：</br> 1、如果您使用PC机的浏览器，那可就不对了，我只爱手机浏览器；</br> 2、如果您是Android手机，那不好意思告诉你，android自带的浏览器抛弃了我，您可以用UCWeb、chrome等第三方浏览器；</br> 3、如果您都不属于以上两种情况，那我只有告诉您：您改换手机啦！！！</br> </p> <p id="yaoyiyaoyes">兄弟，摇一个吧，说不定有一个清纯的妹子等着你呢!</p> <p id="yaoyiyaoresult"></p> <ｓｃｒｉｐｔ> function init() { if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', deviceMotionHandler, false); $("#yaoyiyaoyes").show(); } else { $("#yaoyiyaono").show(); } } var SHAKE_THRESHOLD = 3000; // 定义摇动的阀值 var last_update = 0; // 定义上次更新的时间 var x, y, z, last_x, last_y, last_z; // 定义记录三个轴的数据以及上一次出发的时间 var count = 0; // 计数器 function deviceMotionHandler(eventData) { var acceleration = eventData.accelerationIncludingGravity; // 获取含重力的加速度 var curTime = new Date().getTime(); // 获取当前时间 var diffTime = curTime last_update; // 计算时间差 if (diffTime > 100) { // 固定时间段 last_update = curTime; // 更新时间 x = acceleration.x; // 更新x轴数据 y = acceleration.y; // 更新y轴数据 z = acceleration.z; // 更新z轴数据 var speed = Math.abs(x + y + z last_x last_y last_z) / diffTime * 10000; // 计算速度变化率 if (speed > SHAKE_THRESHOLD) { // 判断是否达到摇动阀值 count++; // 增加计数器 $("#yaoyiyaoyes").hide(); // 隐藏提示信息 $("#yaoyiyaoresult").show(); // 显示结果信息 $("#yaoyiyaoresult").html("摇***!第" + count + "个了！"); } last_x = x; // 更新上一次的x轴数据 last_y = y; // 更新上一次的y轴数据 last_z = z; // 更新上一次的z轴数据 } } $(document).ready(function() { init(); }); </ｓｃｒｉｐｔ></body></html>代码解析
1、初始化函数：init() 用于检查浏览器是否支持DeviceMotionEvent，如果支持则绑定事件**器，否则显示不支持的信息。
2、设备运动事件处理函数：deviceMotionHandler(eventData) 用于处理设备运动事件，获取设备的加速度信息并计算速度变化率，当速度变化率超过设定的阀值时，认为用户进行了摇动操作，并进行相应的处理。
3、页面元素：包括提示用户是否可以摇动的信息、鼓励用户摇动的提示信息以及显示摇动结果的信息。
4、样式设置：通过 CSS 控制页面元素的显示样式。
5、jQuery：使用 jQuery 简化 DOM 操作。
相关问答FAQs
问题1：为什么有些设备无法实现摇一摇功能？
解答1：有些设备可能不支持DeviceMotionEvent，例如部分老旧的 Android 设备或某些 PC 浏览器，在这些设备上，由于硬件或软件的限制，无法获取到设备的加速度信息，因此无法实现摇一摇功能，建议使用支持该功能的现代移动浏览器。
问题2：如何调整摇动灵敏度？
解答2：可以通过调整SHAKE_THRESHOLD 变量的值来改变摇动的灵敏度，增大该值会使摇动检测更加严格，需要更大的加速度变化才会被识别为摇动；减小该值则会提高灵敏度，较小的加速度变化也会被识别为摇动，根据实际需求进行调整即可。
