在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态、加速度等数据(另还有deviceOrientation事件提供了设备角度、朝向等信息)。
而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果。
运动事件监听
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('你的手机太差了,买个新的吧。');
}
获取加速度信息
“摇一摇”的动作既“一定时间内设备了一定距离”,因此通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,即可进行设备是否有进行晃动的判断。而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值。
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update) > 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;
var status = document.getElementById("status");
if (speed > SHAKE_THRESHOLD) {
doResult();
}
last_x = x;
last_y = y;
last_z = z;
}
}
分享到:
相关推荐
HTML5微信摇一摇是一种利用现代浏览器的HTML5技术,结合微信API实现的互动功能,让用户在手机上体验类似于微信官方摇一摇的娱乐效果。这个案例提供了简单易懂的代码,适合初学者学习和开发者快速集成到自己的项目中...
HTML5手机微信摇一摇游戏代码是一个利用HTML5技术实现的互动游戏,旨在模拟微信的摇一摇功能。这个游戏的核心是通过JavaScript库jQuery 1.11.1.min.js来处理用户交互和动画效果,使得在手机上玩时能够获得流畅的体验...
要开发这样一个"微信摇一摇"的功能,通常涉及到的技术栈包括Java、HTML5(H5)和JavaScript(JS)。 首先,从技术角度来看,"微信摇一摇"的后端开发主要使用Java。Java是一种广泛应用于服务器端开发的强大编程语言...
html5手机微信摇一摇抽奖代码是一款手机移动端模仿html5微信摇一摇游戏功能网页特效。
HTML5手机微信摇一摇游戏代码是利用现代Web技术,特别是HTML5的API,结合微信的JSSDK,实现的一款互动娱乐应用。这种游戏通常在移动端运行,通过手机的运动传感器(如加速度计和陀螺仪)检测用户的摇动动作,并将其...
在本文中,我们将深入探讨微信摇一摇游戏的实现原理、核心技术和涉及的关键知识点。 首先,我们需要理解微信开放平台提供的API接口,这些接口允许开发者构建各种应用程序并与微信用户互动。在“微信摇一摇游戏”中...
基于html5-DeviceOrientation-实现微信摇一摇功能.doc
HTML5 摇一摇代码 微信摇一摇 移动端摇一摇,简单易懂,HTML5代码,一看即懂,方便移植至任何系统
在“HTML5模拟微信摇一摇”这个项目中,我们将探讨如何利用HTML5的一些核心技术和JavaScript来实现类似微信中用户熟悉的“摇一摇”功能。 1. **加速度传感器API(Accelerometer)** HTML5中的加速度传感器API允许...
在提供的压缩包文件“仿微信摇一摇效果”中,应该包含了一个示例项目,它演示了上述概念的实现。通过学习和分析这个示例,你可以更直观地了解如何将这些理论知识应用于实际项目中。 总之,利用HTML和JavaScript实现...
1、HTML5手机微信摇一摇游戏代码基于jquery.1.11.1.min.js制作,模仿微信摇一摇功能,可手动摇,效果流畅。非常适合学习以及二次开发,欢迎大家来下载! 二、注意事项 1、开发环境为Visual Studio 2013,无数据库...
【微信摇一摇抽奖前端】是一种常见的互动娱乐功能,常用于各类线上线下活动中,为用户提供趣味性的抽奖体验。这种技术主要基于微信的开放平台接口,结合前端开发技术来实现。通过手机摇动的动作,用户可以参与抽奖,...
通过以上分析,我们可以了解到这份代码主要用于在支持HTML5的移动设备上实现“摇一摇”的功能。尽管标题中提到了PHP,但实际上代码全部由JavaScript组成,且与微信服务器端交互相关的PHP代码未包含在内。此外,这段...
“h5 + js 仿微信摇一摇”这个标题表明我们要探讨的是一个使用HTML5(H5)和JavaScript(JS)技术来实现的互动功能,该功能模仿了微信应用中的“摇一摇”特性。微信的摇一摇功能允许用户通过摇动手机来触发特定的...
HTML5手机微信摇一摇特效是利用现代浏览器的特性,结合CSS、JavaScript和jQuery库,为移动设备上的网页实现与微信应用中相似的摇一揺互动效果。这个压缩包包含了一个完整的示例项目,可以帮助开发者了解并学习如何在...
"html5手机微信摇一摇抽奖代码.zip"是一个利用HTML5技术实现的互动抽奖程序,特别针对微信平台进行了优化,让用户通过手机的摇动动作参与抽奖活动。这个压缩包包含了构建这个功能所需的所有关键文件。 1. **index....
本项目旨在通过H5技术,模仿微信应用中的“摇一摇”和“抢红包”功能,使用户在网页上也能体验到类似的互动乐趣。 首先,我们来探讨“摇一摇”功能的实现。这个功能利用了浏览器的硬件加速API,即DeviceMotionEvent...
通过利用HTML5的元素、JavaScript、以及手机的加速度传感器,我们可以创造出像微信摇一摇这样的有趣功能,增强网页与用户之间的互动性。随着HTML5的不断进步和移动设备硬件的升级,未来可以预见更多的新奇功能将通过...
作为项目的基石,JavaScript是实现微信摇一摇功能的核心语言。开发者需要掌握事件监听(如`window.addEventListener('deviceorientation')`来捕获手机的倾斜和摇晃)、DOM操作(改变页面元素状态以反馈摇一摇结果)...