上次在玩一手游看到里面有一个摇一摇抽奖,游戏是web做的所以在网上找了些代码实现了JS摇一摇功能,
具体内容不详解,直接上码
HTML代码
<audio id="musicBox" src=""></audio>
JS代码
init(); var SHAKE_THRESHOLD = 3000; var last_update = 0; var x = y = z = last_x = last_y = last_z = 0; function init() { if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', deviceMotionHandler, false); } else { alert('not support mobile event'); } } 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; if (speed > SHAKE_THRESHOLD) { alert("感觉到摇动,我要发射了"); var media = document.getElementById("musicBox"); //获取音频控件 media.setAttribute("src", "imgy/shake_sound.mp3"); media.load(); //加载音频 media.play(); //播放音频 } last_x = x; last_y = y; last_z = z; } }
相关推荐
JavaScript 手机摇一摇功能是移动应用中常见的一种互动元素,常用于游戏、抽奖活动或者音乐播放等场景。在JavaScript中实现手机摇一摇功能,主要依赖于HTML5的Device Motion API,这个API可以获取到设备的运动数据,...
jsp html js 手机摇一摇 完全使用js进行计算 可以修改SHAKE_THRESHOLD = 999 来控制灵敏度 非常简单的代码
这个"js手机摇一摇统计次数代码"是一个很好的学习资源,它让我们了解如何利用JavaScript和HTML5的DeviceMotionEvent来实现手机端的交互功能。通过分析和实践这个代码,开发者可以更好地掌握移动端的运动检测和实时...
2. **JavaScript事件处理**:JS是实现摇一摇功能的主体,通过监听DeviceOrientation事件,当设备的运动参数达到一定阈值时,触发摇一摇的行为。 3. **加速度计和陀螺仪**:理解这两个硬件传感器的工作原理是关键,...
在JavaScript(JS)中实现手机端的“摇一摇”...综上所述,“js手机摇一摇统计次数代码”涉及了移动设备的硬件特性、JavaScript事件监听以及用户交互设计等多个方面,对于增强网页应用的互动性和趣味性有着重要作用。
在JavaScript的世界里,实现"手机摇一摇统计次数特效代码"是一种常见的互动功能,尤其适用于移动设备的应用或游戏中。这个功能让用户体验到类似现实世界中的摇晃动作,并将其转化为数字计数,为用户带来新颖的交互...
摇一摇js代码,可在手机端实现摇一摇获得奖品的效果。
"手机摇一摇活动JS+HTML"是一种基于Web技术实现的互动功能,通常用于移动设备上的线上活动或游戏。这个项目可能包含JavaScript代码和HTML页面结构,以模拟真实世界中的摇晃动作,如用户在手机上摇动设备,然后在屏幕...
以上就是使用原生JavaScript实现微信摇一摇功能的核心要点。通过理解设备运动事件和摇动检测逻辑,我们可以创建一个与微信摇一摇类似的功能,并根据需要进行定制和优化。在实际项目中,记得结合提供的源码进行学习和...
在Android开发中,“手机摇一摇震动刷新”是一种常见的用户交互功能,允许用户通过晃动手机来触发某个操作,如刷新界面。这个功能通常应用于新闻应用、社交应用或者任何需要实时更新内容的场景。下面我们将深入探讨...
本文将深入探讨如何使用JavaScript(JS)实现手机端的“摇一摇”次数统计功能。 首先,我们需要理解JavaScript在网页开发中的角色。JavaScript是一种轻量级的解释型编程语言,主要用于增强网页的交互性和动态效果。...
jQuery手机摇一摇抽油卡代码是一款汽车网站常用的油卡抽奖活动代码。
微信或H5页面,JS获取摇一摇事件,响应用户这一事件并进行回馈或处理。代码+摇一摇素材,GIF动画。下载后直接可以使用,完整地样例源码,分享给大家
当用户摇动手机时,设备的加速度数据会发生显著变化,"shake.js"就是通过分析这些数据来判断用户是否进行了摇一摇操作。 在"shake.js-master"压缩包中,主要包含以下内容: 1. **shake.js**:这是核心的JavaScript...
摇一摇功能是微信小程序中的一种交互方式,用户通过手机快速晃动来触发特定的程序逻辑。这种功能常见于各种娱乐和互动场景,如抽奖、游戏等,增加了用户的参与度和趣味性。在微信小程序中实现摇一摇功能,主要涉及...
2. **手机摇一摇事件模拟**:在移动设备上,原生的JavaScript API并不直接支持摇动事件。因此,开发者需要通过监听设备的运动传感器数据(如加速度计)来模拟摇一摇行为。jQuery插件可能被用来封装这个过程,使事件...
要开发这样一个"微信摇一摇"的功能,通常涉及到的技术栈包括Java、HTML5(H5)和JavaScript(JS)。 首先,从技术角度来看,"微信摇一摇"的后端开发主要使用Java。Java是一种广泛应用于服务器端开发的强大编程语言...
### 手机WAP网站仿微信手机摇一摇抽奖活动页面模板 在移动互联网时代,随着智能手机的普及和网络技术的发展,WAP(Wireless Application Protocol,无线应用协议)网站逐渐成为了连接移动用户与互联网的重要桥梁之...
综上所述,摇一摇抽奖页面后台数据库设计涉及前端JSP和JS的交互设计,后端Controller的逻辑处理,以及数据库中的多个表设计,确保了抽奖活动的完整性和用户体验。这样的系统设计既满足了实时抽奖的需求,又能有效地...
在本案例中,“HTML5带音乐手机摇一摇抽奖代码”是一个利用HTML5特性构建的互动抽奖应用,尤其适用于移动端。这个应用通过模拟“摇一摇”动作来触发抽奖事件,并配合背景音乐,为用户带来更为生动有趣的体验。 首先...