1. 首页
  2. 编程语言
  3. Web开发
  4. HTML5手机摇一摇抽奖代码

HTML5手机摇一摇抽奖代码

上传者: 2025-06-01 06:35:49上传 ZIP文件 4.09MB 热度 2次

手机网页的重力摇一摇抽奖,玩法够新颖,交互感也挺强。用的是 HTML5 的Device Orientation API,能读手机的加速度和方向变化。简单说,就是你摇一下手机,页面就能响应,触发抽奖流程。

监听方式也直白,直接用window.addEventListener('deviceorientation')就行了。读取event.accelerationIncludingGravity里的xyz值来判断是不是在“摇”。

判断逻辑你可以设个阈值,比如连续帧里加速度变化量大于一定值就算摇到了,再调用抽奖函数,像startDraw()这种就可以弹窗、动画、接口求之类的事。

用起来比较适合微信内嵌页、活动页、H5 小游戏那种,配合点音效和反馈,用户参与感挺高的。就是要注意下兼容性,有些浏览器或者低端安卓不一定支持,记得加下检测。

你要是想深入了解,还可以看看下面这几个参考,基本都是围绕这个思路扩展的,像颜色切换、音乐、甚至仿微信摇一摇那种。

下载地址
用户评论