Html5 + JS enables mobile phone shake function, html5js

Html5 + JS enables mobile phone shake function, html5js
This article mainly introduces Html5 + JS to implement the mobile phone shake function. This article uses the HTML5 DeviceOrientation to listen to the mobile phone direction sensor data and implement the ripple of the mobile phone shake function. For more information, see

An important feature of HTML5 is DeviceOrientation. It encapsulates the underlying direction sensor and motion sensor in advanced mode and provides DOM Event support. This feature includes two types of events:

1. deviceOrientation: encapsulates the event of the direction sensor data to obtain the direction data in the mobile phone's static state, such as the angle, orientation, and orientation of the mobile phone.

2. deviceMotion: events that encapsulate motion sensor data can be used to obtain Motion Acceleration and other data in the mobile phone's motion status. 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 in Opera H5 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 a mobile app on the webpage: Shake the mobile phone.

DeviceMotionEvent (device motion event) returns information about the device's acceleration and rotation. The acceleration data will contain three axes: x, y, and z (as shown in the diagram, the x axis horizontally runs through the mobile phone screen or notebook keyboard, and the y axis vertically runs through the mobile phone screen or notebook keyboard, Z axis perpendicular to the mobile phone screen or laptop keyboard ). Because some devices may not have hardware to eliminate the impact of gravity, this event will return two attributes, accelerationIncludingGravity (acceleration containing gravity) and acceleration (acceleration), which exclude the impact of gravity.

1. [Code] Listening for motion sensing events
2. [Code] obtain the acceleration with gravity
3. [Code] core method implementation code

An important feature of HTML5 is DeviceOrientation. It encapsulates the underlying direction sensor and motion sensor in advanced mode and provides DOM Event support. This feature includes two types of events:

1. deviceOrientation: encapsulates the event of the direction sensor data to obtain the direction data in the mobile phone's static state, such as the angle, orientation, and orientation of the mobile phone.

2. deviceMotion: events that encapsulate motion sensor data can be used to obtain Motion Acceleration and other data in the mobile phone's motion status.
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 in Opera H5 experience is monitored by DeviceOrientation.
API deviceOrientation event.

In fact, it can also help us implement a very common and fashionable function in a mobile app on the webpage: Shake the mobile phone.

DeviceMotionEvent (device motion event) returns information about the device's acceleration and rotation. The acceleration data will contain three axes: x, y, and z (as shown in the diagram, the x axis horizontally runs through the mobile phone screen or notebook keyboard, and the y axis vertically runs through the mobile phone screen or notebook keyboard, Z axis perpendicular to the mobile phone screen or laptop keyboard ). Because some devices may not have hardware to eliminate the impact of gravity, this event will return two attributes, accelerationIncludingGravity (acceleration containing gravity) and acceleration (acceleration), which exclude the impact of gravity.

1. [Code] Listening for motion sensing events

The Code is as follows:
If (window. DeviceMotionEvent ){
Window. addEventListener ('deviceid', deviceMotionHandler, false );
}

2. [Code] obtain the acceleration with gravity

The Code is as follows:
Function deviceMotionHandler (eventData ){
Var acceleration = eventData. accelerationIncludingGravity;
}

3. [Code] core method implementation code

The Code is as follows:
Var SHAKE_THRESHOLD = xxx;
Var last_update = 0;
Var x, y, z, last_x, last_y, last_z; </p> <p> function deviceMotionHandler (eventData ){
Var acceleration = eventData. accelerationIncludingGravity; </p> <p> var curTime = newDate (). getTime (); </p> <p> if (curTime-lastUpdate)> 100) {</p> <p> var diffTime = curTime-last_update;
Last_update = curTime; </p> <p> x = acceleration. x;
Y = acceleration. y;
Z = acceleration. z; </p> <p> var speed = Math. abs (x + y + z-last_x-last_y-last_z)/diffTime * 10000; </p> <p> if (speed> SHAKE_THRESHOLD ){
Alert ("shaked !");
}
Last_x = x;
Last_y = y;
Last_z = z;
}
}