Html5 JS implementiert die Handy-Shake-Funktion_HTML5-Tutorial-Fähigkeiten

Eine wichtige Funktion von HTML5 ist DeviceOrientation, die eine Kapselung des zugrunde liegenden Richtungs- und Bewegungssensors auf hoher Ebene bietet und Unterstützung für DOM-Ereignisse bietet. Diese Funktion umfasst zwei Arten von Ereignissen:

1. Geräteorientierung: Ein Ereignis, das die Orientierungssensordaten kapselt und die Orientierungsdaten des Mobiltelefons abrufen kann, wenn es stationär ist, z. B. den Winkel, die Ausrichtung, die Ausrichtung usw. des Mobiltelefons.

2. deviceMotion: ein Ereignis, das Bewegungssensordaten kapselt, die Daten wie die Bewegungsbeschleunigung erhalten können, wenn das Mobiltelefon in Bewegung ist. Damit können wir ganz einfach interessante Funktionen wie Schwerkraftmessung und Kompass implementieren, die auf Mobiltelefonen sehr nützlich sein werden. Beispielsweise wird das Beispiel einer Kugel mit Schwerkrafterkennung in der Testversion von Opera H5 durch Abhören des DeviceOrientation-Ereignisses der DeviceOrientation-API implementiert. Tatsächlich kann es uns auch dabei helfen, eine sehr verbreitete und modische Funktion in mobilen Anwendungen im Web zu implementieren: das Schütteln des Telefons.

DeviceMotionEvent (Gerätebewegungsereignis) gibt Informationen über Beschleunigung und Drehung des Geräts zurück. Die Beschleunigungsdaten enthalten drei Achsen: x, y und z (wie in der Abbildung unten gezeigt, verläuft die x-Achse horizontal durch den Bildschirm des Mobiltelefons oder die Tastatur des Laptops, die y-Achse verläuft vertikal durch den Bildschirm des Mobiltelefons oder die Tastatur des Laptops , und die z-Achse steht senkrecht zum Handy-Bildschirm oder der Laptop-Tastatur ). Da einige Geräte möglicherweise nicht über Hardware verfügen, um den Einfluss der Schwerkraft auszuschließen, gibt dieses Ereignis zwei Eigenschaften zurück: „accelerationInclusionGravity“ (Beschleunigung einschließlich Schwerkraft) und „acceleration“ (Beschleunigung), wobei letztere den Einfluss der Schwerkraft ausschließt.

1. [Code] Abhören von Bewegungserkennungsereignissen
2. [Code] Ermitteln der Beschleunigung einschließlich der Schwerkraft
3

Eine wichtige Funktion von HTML5 ist DeviceOrientation, die eine Kapselung des zugrunde liegenden Richtungs- und Bewegungssensors auf hoher Ebene bietet und Unterstützung für DOM-Ereignisse bietet. Diese Funktion umfasst zwei Arten von Ereignissen:

1. Geräteorientierung: Ein Ereignis, das die Orientierungssensordaten kapselt und die Orientierungsdaten des Mobiltelefons abrufen kann, wenn es stationär ist, z. B. den Winkel, die Ausrichtung, die Ausrichtung usw. des Mobiltelefons.

2. deviceMotion: ein Ereignis, das Bewegungssensordaten kapselt, die Daten wie die Bewegungsbeschleunigung erhalten können, wenn das Mobiltelefon in Bewegung ist.

Damit können wir problemlos interessante Funktionen wie Schwerkraftmessung und Kompass implementieren, die auf Mobiltelefonen sehr nützlich sein werden. Beispielsweise wird das Beispiel eines Schwerkraftsensorballs in der Testversion von Opera H5 durch Abhören des deviceOrientation-Ereignisses der DeviceOrientation
API implementiert.

Tatsächlich kann es uns auch dabei helfen, eine sehr verbreitete und modische Funktion in mobilen Anwendungen im Web zu implementieren: das Schütteln des Telefons.

DeviceMotionEvent (Gerätebewegungsereignis) gibt Informationen über Beschleunigung und Drehung des Geräts zurück. Die Beschleunigungsdaten enthalten drei Achsen: x, y und z (wie in der Abbildung unten gezeigt, verläuft die x-Achse horizontal durch den Bildschirm des Mobiltelefons oder die Tastatur des Laptops, die y-Achse verläuft vertikal durch den Bildschirm des Mobiltelefons oder die Tastatur des Laptops , und die Z-Achse steht senkrecht zum Handy-Bildschirm oder zur Laptop-Tastatur ). Da einige Geräte möglicherweise nicht über Hardware verfügen, um den Einfluss der Schwerkraft auszuschließen, gibt dieses Ereignis zwei Eigenschaften zurück: „accelerationInclusiveGravity“ (Beschleunigung einschließlich Schwerkraft) und „acceleration“ (Beschleunigung), wobei letztere den Einfluss der Schwerkraft ausschließt.

1. [Code] Auf Bewegungserkennungsereignisse achten

Kopieren Sie den CodeDer Code ist wie folgt folgt:

if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}

2. Code] Holen Sie sich den Inhalt mit der Erdbeschleunigung

Code kopierenDer Code lautet wie folgt:

function deviceMotionHandler(eventData) {
var Beschleunigung =eventData.accelerationInclusionGravity;
}

3. [Code] Kernmethoden-Implementierungscode

Kopieren Sie den CodeDer Code lautet wie folgt:

var SHAKE_THRESHOLD = xxx;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;

function deviceMotionHandler(eventData) {
var Beschleunigung =eventData.accelerationInclusionGravity;

var curTime = newDate().getTime();

if ((curTime – lastUpdate)> 100) {

var diffTime = curTime -last_update;
last_update = curTime;

x = Beschleunigung.x;
y = Beschleunigung.y;
z = Beschleunigung.z;

var speed = Math.abs(x y z – last_x – last_y – last_z) / diffTime * 10000;

if (speed > SHAKE_THRESHOLD) {
alert(“shaked!”);
}
last_x = x;
last_y = y;
last_z = z;
}
}