利用HTML5的devicemotion事件实现手机摇一摇抽奖 年会抽奖

web前端|html教程

Html5

web前端-html教程

摇一摇JS脚本逻辑：

接下来是移动端JS脚本逻辑的实现，摇一摇的实现需借助html5新增的devicemotion事件，获取设备在位置和方向上的改变速度的相关信息，该事件的基本使用如下：

支付网关源码,ubuntu驱动更改慢,tomcat启动时出错,共济会爬虫族,php标签使用教程交流,seo财务lzw

if (window.DeviceMotionEvent) { window.addEventListener(devicemotion, handler, !1); lastTime = new Date();} else { alert(你的浏览器不支持摇一摇功能.);}

devicemotion事件对象中有一个accelerationIncludingGravity属性，该属性包括：一个包含x、y 和z 属性的对象，在考虑z 轴自然重力加速度的情况下，告诉你在每个方向上的加速度。该API的具体使用大家可以参考网上的资料，非常多，这里就不重复了。 摇一摇的具体逻辑如下：

sqlite 源码阅读,vscode保存被删的文件,ubuntu 装完 闪,命令查看tomcat内存,puppeteer高级爬虫,php 当前时间毫秒数,公司短视频seo优化推广,今日头条新闻网站源码带手机pc版,织梦免费企业模板网站lzw

function handler(e) { var current = e.accelerationIncludingGravity; var currentTime; var timeDifference; var deltaX = 0; var deltaY = 0; var deltaZ = 0; //记录上一次设备在x,y,z方向上的加速度if ((lastX === null) && (lastY === null) && (lastZ === null)) { lastX = current.x; lastY = current.y; lastZ = current.z; return; } //得到两次移动各个方向上的加速度绝对差距 deltaX = Math.abs(lastX - current.x); deltaY = Math.abs(lastY - current.y); deltaZ = Math.abs(lastZ - current.z); //当差距大于设定的阀值并且时间间隔大于指定阀值时，触发摇一摇逻辑 if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ > threshold))) { currentTime = new Date; timeDifference = currentTime.getTime() - lastTime.getTime(); //时间间隔 if (timeDifference > timeout) { //触发摇一摇事件 dealShake(); lastTime = new Date; } } lastX = current.x; lastY = current.y; lastZ = current.z;}

不考虑各等奖的中奖概率问题

源码app下载 迅雷下载 迅雷下载,ubuntu有收费项目,tomcat直接访问图片,java爬虫结构,php源码查杀,中山市seo上词点击软件lzw

最终完整代码示例：

html,body{ width:100%; height:100%; background-color: #000; margin:0; overflow: hidden;} .tip{ position: absolute; bottom: 30px; left: 10px; color: #fff; font-family: 楷体; text-align: center; right: 10px; height: 32px; line-height: 32px; background-color: rgba(255,255,255,.4); border-radius: 3px; } .tip.active{ -webkit-animation: jump 1.5s linear; animation: jump 1s linear; }

var lastX = null, lastY = null, lastZ = null; var threshold = 3; //灵敏度（值越小灵敏度越高） var timeout = 1000; var lastTime = null; var isShaking = !1; document.addEventListener(DOMContentLoaded, function (e) { ready(); }, !1); /*脚本逻辑： *移动端JS脚本逻辑的实现，摇一摇的实现需借助html5新增的devicemotion事件，获取设备在位置和方向上的改变速度的相关信息。 *devicemotion事件对象中有一个accelerationIncludingGravity属性，该属性包括：一个包含x、y 和z 属性的对象，在考虑z 轴自然重力加速度的情况下，告诉你在每个方向上的加速度。 */ function ready() { if (window.DeviceMotionEvent) {window.addEventListener(devicemotion, handler, !1);lastTime = new Date(); } else {alert(你的浏览器不支持摇一摇功能.); } } function handler(e) { var current = e.accelerationIncludingGravity; var currentTime; var timeDifference; var deltaX = 0; var deltaY = 0; var deltaZ = 0; //记录上一次设备在x,y,z方向上的加速度 if ((lastX === null) && (lastY === null) && (lastZ === null)) {lastX = current.x;lastY = current.y;lastZ = current.z;return; } //得到两次移动各个方向上的加速度绝对差距 deltaX = Math.abs(lastX - current.x); deltaY = Math.abs(lastY - current.y); deltaZ = Math.abs(lastZ - current.z); //当差距大于设定的阀值并且时间间隔大于指定阀值时，触发摇一摇逻辑 if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ > threshold))) {currentTime = new Date;timeDifference = currentTime.getTime() - lastTime.getTime();//时间间隔if (timeDifference > timeout) { //触发摇一摇事件 dealShake(); lastTime = new Date;} } lastX = current.x; lastY = current.y; lastZ = current.z; } function dealShake() { if (isShaking) return; isShaking = !0; document.getElementById("tip").innerHTML = "恭喜您，摇中：" + GetName(); setTimeout(function () {isShaking = !1;document.getElementById("tip").innerHTML = " "; }, 1000); } function GetName() { var chars = ["一等奖", "二等奖", "三等奖", "四等奖", "五等奖"]; return chars[GetRandom(0, chars.length - 1)]; } function GetRandom(minValue, maxValue) { return Math.round(Math.random() * (maxValue - minValue)) + minValue; } shake.html

更多利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖相关文章请关注PHP中文网！