Html5 JS implements mobile phone shake function_html5 tutorial skills

An important feature of HTML5 is DeviceOrientation, which provides high-level encapsulation of the underlying direction sensor and motion sensor and provides support for DOM events. This feature includes two types of events:

1. deviceOrientation: An event that encapsulates the orientation sensor data and can obtain the orientation data of the mobile phone when it is stationary, such as the angle, orientation, orientation, etc. of the mobile phone.

2. deviceMotion: an event that encapsulates motion sensor data, which can obtain data such as motion acceleration when the mobile phone is in motion. Using it, we can easily implement interesting functions such as gravity sensing and compass, which will be very useful on mobile phones. For example, the gravity sensing ball example in the Opera H5 trial version is implemented by listening to the deviceOrientation event of the DeviceOrientation API. In fact, it can also help us implement a very common and fashionable function in mobile applications on the web: shake the phone.

DeviceMotionEvent (device motion event) returns information about acceleration and rotation of the device. The acceleration data will contain three axes: x, y and z (as shown in the figure below, the x-axis runs horizontally through the mobile phone screen or laptop keyboard, the y-axis runs vertically through the mobile phone screen or laptop keyboard, and the z-axis is perpendicular to the mobile phone screen or laptop keyboard ). Because some devices may not have hardware to exclude the influence of gravity, this event will return two properties, accelerationIncludingGravity (acceleration including gravity) and acceleration (acceleration), the latter excluding the influence of gravity.

1. [Code] Listening to motion sensing events
2. [Code] Obtaining acceleration including gravity
3. [Code] Core method implementation code

An important feature of HTML5 is DeviceOrientation, which provides high-level encapsulation of the underlying direction sensor and motion sensor and provides support for DOM events. This feature includes two types of events:

1. deviceOrientation: An event that encapsulates the orientation sensor data and can obtain the orientation data of the mobile phone when it is stationary, such as the angle, orientation, orientation, etc. of the mobile phone.

2. deviceMotion: an event that encapsulates motion sensor data, which can obtain data such as motion acceleration when the mobile phone is in motion.
Using it, we can easily implement interesting functions such as gravity sensing and compass, which will be very useful on mobile phones. For example, the gravity sensor ball example in the Opera H5 trial version is implemented by listening to the deviceOrientation event of the DeviceOrientation
API.

In fact, it can also help us implement a very common and fashionable function in mobile applications on the web: shake the phone.

DeviceMotionEvent (device motion event) returns information about acceleration and rotation of the device. The acceleration data will contain three axes: x, y and z (as shown in the figure below, the x-axis runs horizontally through the mobile phone screen or laptop keyboard, the y-axis runs vertically through the mobile phone screen or laptop keyboard, and the z-axis is perpendicular to the mobile phone screen or laptop keyboard ). Because some devices may not have hardware to exclude the influence of gravity, this event will return two properties, accelerationIncludingGravity (acceleration including gravity) and acceleration (acceleration), the latter excluding the influence of gravity.

1. [Code] Listening for motion sensing events

Copy the code

The code is as follows:

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

2. [Code] Get the content containing Acceleration of gravity

Copy code

The code is as follows:

function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
}

3. [Code] Core method implementation code

Copy the code

The code is as follows:

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

function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;

var curTime = newDate().getTime();

if ((curTime – lastUpdate)> 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) {
alert(“shaked!”);
}
last_x = x;
last_y = y;
last_z = z;
}
}