Heim >Web-Frontend >HTML-Tutorial >Nutzen Sie das Devicemotion-Event von HTML5, um die Lotterie zu realisieren, indem Sie das Mobiltelefon und die Lotterie auf der Jahrestagung schütteln
Nutzen Sie das Devicemotion-Event von HTML5, um die Lotterie zu realisieren, indem Sie das Mobiltelefon und die Lotterie auf der Jahrestagung schütteln
- 高洛峰Original
- 2017-02-09 15:43:401737Durchsuche
Schütteln Sie die JS-Skriptlogik:
Der nächste Schritt ist die Implementierung der mobilen JS-Skriptlogik. Die Implementierung des Shakes erfordert die Hilfe des neuen Devicemotion-Ereignisses in HTML5, um die Änderungsgeschwindigkeit des Geräts in Position zu bringen Information, die grundlegende Verwendung dieses Ereignisses ist wie folgt:
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', handler, !1);
lastTime = new Date();
} else {
alert('你的浏览器不支持摇一摇功能.');
}Das Devicemotion-Ereignisobjekt enthält ein Beschleunigungsattribut, das Folgendes umfasst: ein Objekt, das x-, y- und z-Attribute enthält Berücksichtigt man die natürliche Schwerkraftbeschleunigung des Z-Achsen-Falles, so erhält man die Beschleunigung in jede Richtung. Informationen zur spezifischen Verwendung dieser API finden Sie im Internet. Es gibt viele Informationen, daher werde ich sie hier nicht wiederholen. Die spezifische Logik des Schüttelns lautet wie folgt:
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;
}Berücksichtigen Sie nicht die Gewinnwahrscheinlichkeit jedes Preises
Das endgültige vollständige Codebeispiel:
<!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.htmlMachen Sie mehr Verwendung von HTML5 Das Devicemotion-Event realisiert die Lotterie durch Schütteln des Mobiltelefons. Für Artikel im Zusammenhang mit der Jahresversammlungslotterie achten Sie bitte auf die chinesische PHP-Website!