HTML5deviceorientation实现摇一摇一个手机网站

本文主要介绍了HTML5 deviceorientation手机网站震动功能代码的例子。本文直接给出了实现代码，需要的朋友可以参考一下。

介绍前发表了两份声明：

下面的代码可以直接运行，当然你不会忘记引用jQuery。

复制代码代码如下所示：

/ / deviceorientation方向和运动传感器是在高级包的底部，提供了DOM事件支持。
这些特性包括两个事件：
1、deviceorientation： / /封装的传感器数据的事件的方向，可以得到在静态条件下的数据的方向，移动电话（手机在角度、位置和方向）。
2、devicemotion： / /包运动传感器的事件，可以移动数据的情况下获得手机的加速度。
使用这两个事件，可以实现重力传感器、指南针等有趣的功能。
/ /现在是很常见的，在许多应用程序在功能；mdash；摇一摇，摇，摇到找人看新闻，摇一摇找金…
也许在android或iOS上的这个函数的客户端你已经知道了，但是现在，我将告诉你如何在手机上实现一个抖动的Web功能。
好了，我们现在就开始吧，嘿~
/ /让我们了解设备运行事件--第一；mdash；devicemotionevent：返回设备和相关信息的旋转加速度，加速度数据包含以下三个方向：
横屏手机；
纵向手机屏幕；
垂直屏幕移动电话。
鉴于某些设备不排除重力的影响，所以该事件将返回两个属性：
1、accelerationincludinggravity / /（包括重力加速度）
2，加速度（不包括重力加速度的影响）
作为码，代码是最直接的，来吧，走路的代码！
首先，要监视页面上的运动感应事件。
函数init（）{
如果（窗口。devicemotionevent）{
支持运动感应事件的移动浏览器
Window.addEventListener（'devicemotion '，devicemotionhandler，假）；
$（# yaoyiyaoyes ）显示（）；
其他{ }
移动浏览器不支持运动感应事件。
$（# yaoyiyaono ）显示（）；
}
}
那么，如何计算用户是否在移动电话中抖动呢可以从以下几点考虑：
事实上，移动电话中的1个用户总是一个方向抖动；
2，当用户改变/动摇手机在X，Y，Z三方向将有相应的速度；
3，手机不能以正常移动用户的移动/移动行为（改变手机在我的口袋里，走到那里会加速）。
考虑到以上三点，根据三个方向的加速度计算间隔进行测量，并研究它们在固定时间段内的变化率，还需要确定一个阈值，以触发运行后的抖动。
首先定义一个抖动阈值
无功shake_threshold = 3000；
定义一个变量来保存最后一次更新时间
无功last_update = 0；
然后定义x，y，z，记录三轴数据和最后一次的时间。
var x；
var y；
VaR Z；
无功last_x；
无功last_y；
无功last_z；
为了增加这个示例的乐趣，添加一个计数器。
var计数= 0；
功能devicemotionhandler（EVENTDATA）{
随着重力加速度的增加
VaR加速度= eventdata.accelerationincludinggravity；
获取当前时间
无功curtime =新的日期（）GetTime（）；
VaR difftime = curtime - last_update；
固定时间段
如果（difftime > 100）{
last_update = curtime；
x =加速度；
y =加速度；
z =加速度；
速度= math.abs（X + Y + Z last_x - last_y - last_z） / difftime * 10000；
如果（速度> shake_threshold）{
可以实现数据逻辑操作后的抖动
计数+；
$（# yaoyiyaoyes ）藏（）；
$（# yaoyiyaoresult ）显示（）；
$（# yaoyiyaoresult）。Html（摇你的妹妹！+计数+A！；
}
last_x = x；
last_y = Y；
last_z = Z；
}
}

兄弟，如果你看到我，你现在不能动摇，不是你没有资格使用我。
1，如果你使用PC浏览器，那是不对的，我只喜欢移动浏览器；
2，如果你是一个Android手机，我很抱歉地告诉你Android的浏览器已经抛弃了我。你可以使用浏览器，Chrome和其他三方浏览器。
3，如果你不属于以上两种情况，那么我只告诉你：你换手机！！！

兄弟，摇一摇，也许有个纯洁的女孩在等你！

$（文档）Ready（函数（）{）
init（）；
}）；