`

html5实现微信摇一摇功能,html5实现

    博客分类:
  • htm5
 
阅读更多
在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微信摇一摇是一种利用现代浏览器的HTML5技术,结合微信API实现的互动功能,让用户在手机上体验类似于微信官方摇一摇的娱乐效果。这个案例提供了简单易懂的代码,适合初学者学习和开发者快速集成到自己的项目中...

    HTML5手机微信摇一摇游戏代码.zip

    HTML5手机微信摇一摇游戏代码是一个利用HTML5技术实现的互动游戏,旨在模拟微信的摇一摇功能。这个游戏的核心是通过JavaScript库jQuery 1.11.1.min.js来处理用户交互和动画效果,使得在手机上玩时能够获得流畅的体验...

    微信摇一摇

    要开发这样一个"微信摇一摇"的功能,通常涉及到的技术栈包括Java、HTML5(H5)和JavaScript(JS)。 首先,从技术角度来看,"微信摇一摇"的后端开发主要使用Java。Java是一种广泛应用于服务器端开发的强大编程语言...

    html5手机微信摇一摇抽奖代码

    html5手机微信摇一摇抽奖代码是一款手机移动端模仿html5微信摇一摇游戏功能网页特效。

    HTML5手机微信摇一摇游戏代码

    HTML5手机微信摇一摇游戏代码是利用现代Web技术,特别是HTML5的API,结合微信的JSSDK,实现的一款互动娱乐应用。这种游戏通常在移动端运行,通过手机的运动传感器(如加速度计和陀螺仪)检测用户的摇动动作,并将其...

    微信摇一摇游戏

    在本文中,我们将深入探讨微信摇一摇游戏的实现原理、核心技术和涉及的关键知识点。 首先,我们需要理解微信开放平台提供的API接口,这些接口允许开发者构建各种应用程序并与微信用户互动。在“微信摇一摇游戏”中...

    HTML5 摇一摇代码 微信摇一摇 移动端摇一摇

    HTML5 摇一摇代码 微信摇一摇 移动端摇一摇,简单易懂,HTML5代码,一看即懂,方便移植至任何系统

    HTML5模拟微信摇一摇

    在“HTML5模拟微信摇一摇”这个项目中,我们将探讨如何利用HTML5的一些核心技术和JavaScript来实现类似微信中用户熟悉的“摇一摇”功能。 1. **加速度传感器API(Accelerometer)** HTML5中的加速度传感器API允许...

    HTML实现微信“摇一摇”效果 js获取移动设备摇动数据

    在提供的压缩包文件“仿微信摇一摇效果”中,应该包含了一个示例项目,它演示了上述概念的实现。通过学习和分析这个示例,你可以更直观地了解如何将这些理论知识应用于实际项目中。 总之,利用HTML和JavaScript实现...

    HTML5手机微信摇一摇源码 HTMLmobilewechatshake.rar

    1、HTML5手机微信摇一摇游戏代码基于jquery.1.11.1.min.js制作,模仿微信摇一摇功能,可手动摇,效果流畅。非常适合学习以及二次开发,欢迎大家来下载! 二、注意事项 1、开发环境为Visual Studio 2013,无数据库...

    微信摇一摇抽奖前端

    【微信摇一摇抽奖前端】是一种常见的互动娱乐功能,常用于各类线上线下活动中,为用户提供趣味性的抽奖体验。这种技术主要基于微信的开放平台接口,结合前端开发技术来实现。通过手机摇动的动作,用户可以参与抽奖,...

    微信php摇一摇代码

    通过以上分析,我们可以了解到这份代码主要用于在支持HTML5的移动设备上实现“摇一摇”的功能。尽管标题中提到了PHP,但实际上代码全部由JavaScript组成,且与微信服务器端交互相关的PHP代码未包含在内。此外,这段...

    h5 + js 仿微信摇一摇

    “h5 + js 仿微信摇一摇”这个标题表明我们要探讨的是一个使用HTML5(H5)和JavaScript(JS)技术来实现的互动功能,该功能模仿了微信应用中的“摇一摇”特性。微信的摇一摇功能允许用户通过摇动手机来触发特定的...

    html5手机微信摇一摇特效.zip

    HTML5手机微信摇一摇特效是利用现代浏览器的特性,结合CSS、JavaScript和jQuery库,为移动设备上的网页实现与微信应用中相似的摇一揺互动效果。这个压缩包包含了一个完整的示例项目,可以帮助开发者了解并学习如何在...

    html5手机微信摇一摇抽奖代码.zip

    "html5手机微信摇一摇抽奖代码.zip"是一个利用HTML5技术实现的互动抽奖程序,特别针对微信平台进行了优化,让用户通过手机的摇动动作参与抽奖活动。这个压缩包包含了构建这个功能所需的所有关键文件。 1. **index....

    用H5仿微信实现摇一摇,抢红包等效果

    本项目旨在通过H5技术,模仿微信应用中的“摇一摇”和“抢红包”功能,使用户在网页上也能体验到类似的互动乐趣。 首先,我们来探讨“摇一摇”功能的实现。这个功能利用了浏览器的硬件加速API,即DeviceMotionEvent...

    JavaScript+H5实现微信摇一摇功能

    通过利用HTML5的元素、JavaScript、以及手机的加速度传感器,我们可以创造出像微信摇一摇这样的有趣功能,增强网页与用户之间的互动性。随着HTML5的不断进步和移动设备硬件的升级,未来可以预见更多的新奇功能将通过...

    微信摇一摇项目

    作为项目的基石,JavaScript是实现微信摇一摇功能的核心语言。开发者需要掌握事件监听(如`window.addEventListener('deviceorientation')`来捕获手机的倾斜和摇晃)、DOM操作(改变页面元素状态以反馈摇一摇结果)...

    HTML5仿手机微信摇一摇游戏特效源码.zip

    在这个“HTML5仿手机微信摇一摇游戏特效源码”中,我们可以深入探讨HTML5如何实现类似微信摇一摇的功能。 首先,这个项目的核心在于利用HTML5的设备API,特别是DeviceMotion事件。DeviceMotion事件允许开发者获取到...

Global site tag (gtag.js) - Google Analytics