利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖
生活随笔
收集整理的這篇文章主要介紹了
利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
搖一搖JS腳本邏輯：
接下來是移動(dòng)端JS腳本邏輯的實(shí)現(xiàn)，搖一搖的實(shí)現(xiàn)需借助html5新增的devicemotion事件，獲取設(shè)備在位置和方向上的改變速度的相關(guān)信息，該事件的基本使用如下：
devicemotion事件對(duì)象中有一個(gè)accelerationIncludingGravity屬性，該屬性包括：一個(gè)包含x、y 和z 屬性的對(duì)象，在考慮z 軸自然重力加速度的情況下，告訴你在每個(gè)方向上的加速度。該API的具體使用大家可以參考網(wǎng)上的資料，非常多，這里就不重復(fù)了。 搖一搖的具體邏輯如下：
function handler(e) {var current = e.accelerationIncludingGravity;var currentTime;var timeDifference;var deltaX = 0;var deltaY = 0;var deltaZ = 0;//記錄上一次設(shè)備在x,y,z方向上的加速度 if ((lastX === null) && (lastY === null) && (lastZ === null)) {lastX = current.x;lastY = current.y;lastZ = current.z;return;}//得到兩次移動(dòng)各個(gè)方向上的加速度絕對(duì)差距deltaX = Math.abs(lastX - current.x);deltaY = Math.abs(lastY - current.y);deltaZ = Math.abs(lastZ - current.z);//當(dāng)差距大于設(shè)定的閥值并且時(shí)間間隔大于指定閥值時(shí)，觸發(fā)搖一搖邏輯if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ > threshold))) {currentTime = new Date;timeDifference = currentTime.getTime() - lastTime.getTime();//時(shí)間間隔if (timeDifference > timeout) {//觸發(fā)搖一搖事件 dealShake();lastTime = new Date;}}lastX = current.x;lastY = current.y;lastZ = current.z; }?
不考慮各等獎(jiǎng)的中獎(jiǎng)概率問題
最終完整代碼示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> 6 <title>搖一搖抽獎(jiǎng)</title> 7 <style type="text/css"> 8 html,body{ width:100%; height:100%; background-color: #000; margin:0; overflow: hidden;} 9 .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; } 10 </style> 11 </head> 12 <body> 13 <div class="tip" id="tip"> </div> 14 15 <script type="text/javascript"> 16 var lastX = null, 17 lastY = null, 18 lastZ = null; 19 var threshold = 3; //靈敏度（值越小靈敏度越高） 20 var timeout = 1000; 21 var lastTime = null; 22 var isShaking = !1; 23 document.addEventListener('DOMContentLoaded', function (e) { 24 ready(); 25 }, !1); 26 27 /*腳本邏輯： 28 *移動(dòng)端JS腳本邏輯的實(shí)現(xiàn)，搖一搖的實(shí)現(xiàn)需借助html5新增的devicemotion事件，獲取設(shè)備在位置和方向上的改變速度的相關(guān)信息。 29 *devicemotion事件對(duì)象中有一個(gè)accelerationIncludingGravity屬性，該屬性包括：一個(gè)包含x、y 和z 屬性的對(duì)象，在考慮z 軸自然重力加速度的情況下，告訴你在每個(gè)方向上的加速度。 30 */ 31 function ready() { 32 if (window.DeviceMotionEvent) { 33 window.addEventListener('devicemotion', handler, !1); 34 lastTime = new Date(); 35 } else { 36 alert('你的瀏覽器不支持搖一搖功能.'); 37 } 38 } 39 40 function handler(e) { 41 var current = e.accelerationIncludingGravity; 42 var currentTime; 43 var timeDifference; 44 var deltaX = 0; 45 var deltaY = 0; 46 var deltaZ = 0; 47 48 //記錄上一次設(shè)備在x,y,z方向上的加速度 49 if ((lastX === null) && (lastY === null) && (lastZ === null)) { 50 lastX = current.x; 51 lastY = current.y; 52 lastZ = current.z; 53 return; 54 } 55 56 //得到兩次移動(dòng)各個(gè)方向上的加速度絕對(duì)差距 57 deltaX = Math.abs(lastX - current.x); 58 deltaY = Math.abs(lastY - current.y); 59 deltaZ = Math.abs(lastZ - current.z); 60 //當(dāng)差距大于設(shè)定的閥值并且時(shí)間間隔大于指定閥值時(shí)，觸發(fā)搖一搖邏輯 61 if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ > threshold))) { 62 currentTime = new Date; 63 timeDifference = currentTime.getTime() - lastTime.getTime(); 64 //時(shí)間間隔 65 if (timeDifference > timeout) { 66 //觸發(fā)搖一搖事件 67 dealShake(); 68 lastTime = new Date; 69 } 70 } 71 72 lastX = current.x; 73 lastY = current.y; 74 lastZ = current.z; 75 } 76 77 function dealShake() { 78 if (isShaking) return; 79 isShaking = !0; 80 81 document.getElementById("tip").innerHTML = "恭喜您，搖中：" + GetName(); 82 83 setTimeout(function () { 84 isShaking = !1; 85 document.getElementById("tip").innerHTML = " "; 86 }, 1000); 87 88 } 89 90 function GetName() { 91 var chars = ["一等獎(jiǎng)", "二等獎(jiǎng)", "三等獎(jiǎng)", "四等獎(jiǎng)", "五等獎(jiǎng)"]; 92 return chars[GetRandom(0, chars.length - 1)]; 93 } 94 function GetRandom(minValue, maxValue) { 95 return Math.round(Math.random() * (maxValue - minValue)) + minValue; 96 } 97 </script> 98 99 </body> shake.html?
轉(zhuǎn)載于:https://www.cnblogs.com/xiongzaiqiren/p/6285693.html
總結(jié)
以上是生活随笔為你收集整理的利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 存储过程到底是什么
- 下一篇： 整理前端css/js/jq常见问题及解决