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
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Ist HTML für Anfänger leicht zu lernen?
Apr 07, 2025 am 12:11 AM
HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
Was ist ein Beispiel für ein Start -Tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
Wie kann man adaptives Layout der Y-Achse-Position in Webanmerkungen implementieren?
Apr 04, 2025 pm 11:30 PM
Der ad-axis-Position adaptive Algorithmus für Webanmerkungen In diesem Artikel wird untersucht, wie Annotationsfunktionen ähnlich wie Word-Dokumente implementiert werden, insbesondere wie man mit dem Intervall zwischen Anmerkungen umgeht ...
Gitee Pages statische Website -Bereitstellung fehlgeschlagen: Wie können Sie einzelne Dateien 404 Fehler beheben und beheben?
Apr 04, 2025 pm 11:54 PM
GitePages statische Website -Bereitstellung fehlgeschlagen: 404 Fehlerbehebung und Auflösung bei der Verwendung von Gitee ...
HTML, CSS und JavaScript: Wesentliche Tools für Webentwickler
Apr 09, 2025 am 12:12 AM
HTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.
Wie verwendet ich CSS3 und JavaScript, um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken zu erreichen?
Apr 05, 2025 am 06:15 AM
Um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken auf das Bild zu erreichen, müssen viele Webdesigns einen interaktiven Effekt erzielen: Klicken Sie auf ein bestimmtes Bild, um die Umgebung zu machen ...
