HTML5的搖一搖抽獎功能是目前比較流行的一種互動方式,可以帶給用戶更加豐富的體驗感。以下是一段使用HTML5實現的搖一搖抽獎代碼。
var SHAKE_THRESHOLD = 3000; // 定義搖一搖的閾值 var last_update = 0; var x = y = z = last_x = last_y = last_z = 0; function init() { // 初始化函數,獲取當前設備支持HTML5的加速度傳感器 if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', deviceMotionHandler, false); } else { alert('當前設備不支持HTML5的搖一搖功能!'); } } function deviceMotionHandler(eventData) { // 實現搖一搖功能 var acceleration = eventData.accelerationIncludingGravity; var curTime = new Date().getTime(); if ((curTime - last_update) >100) { var diffTime = curTime - last_update; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; if (speed >SHAKE_THRESHOLD) { // 執行抽獎操作 } last_x = x; last_y = y; last_z = z; } }
在以上代碼中,首先定義了一個搖一搖的閾值SHAKE_THRESHOLD,并初始化了各個變量。然后通過初始化函數init()獲取當前設備支持HTML5的加速度傳感器,之后實現了搖一搖功能的函數deviceMotionHandler()。在該函數中,獲取當前設備的加速度傳感器數值,并計算出速度。當速度超過設定的閾值SHAKE_THRESHOLD時,即可執行抽獎操作。