Html5+JS实现手机摇一摇功能的示例

小编给大家分享一下Html5+JS实现手机摇一摇功能的示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

10年的桃山网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整桃山建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“桃山网站设计”,“桃山网站推广”以来，每个客户项目都认真落实执行。

js有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

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. [代码]监听运动传感事件

代码如下:

if (window.DeviceMotionEvent) {
window.addEventListener(‘devicemotion’,deviceMotionHandler, false);
}

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

代码如下:

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

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

代码如下:

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;
}
}

以上是“Html5+JS实现手机摇一摇功能的示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！