JS 스크립트 로직 흔들기:
다음 단계는 모바일 JS 스크립트 로직을 구현하는 것입니다. 흔들기를 구현하려면 위치와 방향의 관련 변경 사항을 얻기 위해 HTML5의 새로운 devicemotion 이벤트를 사용해야 합니다. 장치 정보에 따르면 이 이벤트의 기본 사용법은 다음과 같습니다.
if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', handler, !1); lastTime = new Date(); } else { alert('你的浏览器不支持摇一摇功能.'); }
devicemotion 이벤트 개체에는 다음과 같은 AccelerationIncludeGravity 속성이 있습니다. 여기에는 x, y 및 z 속성을 포함하는 개체가 포함됩니다. z축의 자연 중력 가속도는 각 방향의 가속도를 알려줍니다. 이 API의 구체적인 사용에 대해서는 인터넷에 있는 정보를 참조할 수 있으므로 여기서는 반복하지 않겠습니다. 흔들기의 구체적인 논리는 다음과 같습니다.
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; }
각 경품의 당첨 확률을 고려하지 않습니다
최종 완성 코드 예:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>摇一摇抽奖</title> <style type="text/css"> 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; } </style> </head> <body> <div class="tip" id="tip"> </div> <script type="text/javascript"> 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; } </script> </body> shake.html
를 사용한 장치 모션 이벤트 추가 구현 HTML5 휴대폰을 흔들어 로또를 뽑아보세요. 연차총회 로또 관련 글은 PHP 중국어 홈페이지를 주목해주세요!