搖一搖JS腳本邏輯：

接下來是移動端JS腳本邏輯的實現，搖一搖的實現需借助html5新增的devicemotion事件，獲取設備在位置和方向上的改變速度的相關信息，該事件的基本使用如下：if (window.DeviceMotionEvent) {

window.addEventListener('devicemotion', handler, !1);

lastTime = new Date();

} else {

alert('你的瀏覽器不支持搖一搖功能.');

}

devicemotion事件對象中有一個accelerationIncludingGravity屬性，該屬性包括：一個包含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;

}

不考慮各等獎的中獎概率問題

最終完整代碼示例：

搖一搖抽獎

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中文網！

相關標簽：Html5

本文原創發布php中文網，轉載請注明出處，感謝您的尊重！

總結

以上是生活随笔為你收集整理的摇一摇抽奖 php,利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。