HTML5 DeviceOrientation implements the code example of the mobile website shake function, html5orientation

HTML5 DeviceOrientation implements the code example of the mobile website shake function, html5orientation
This article mainly introduces the code example of HTML5 DeviceOrientation to implement the mobile website shake function. This article provides the implementation code directly. For more information, see

We made two statements before the introduction:

The following code can be run directly. Of course you should not forget to reference jQuery.

The Code is as follows:
<Script>
// DeviceOrientation encapsulates the underlying direction sensor and motion sensor in advanced mode to support DOM events.
// This feature includes two events:
// 1. deviceOrientation: encapsulate the event of the direction sensor data to obtain the direction data (the angle, orientation, and orientation of the mobile phone) in the static state of the mobile phone ).
// 2. deviceMotion: encapsulates motion sensor events to obtain Motion Acceleration and other data during mobile phone motion.
// Use these two events to implement interesting functions such as gravity sensing and compass. </P> <p> // currently, there is a very common and fashionable feature in many Native applications-shake, shake to find someone, shake to watch the news, shake to find gold coins...
// You may be familiar with this function on the android or ios client, but now I will show you how to implement the shake function on the mobile phone webpage. </P> <p> // OK. Let's start now ~
// First, let's take a look at the device motion event-DeviceMotionEvent: returns information about the device's acceleration and rotation. The acceleration data contains the following three directions:
// X: the screen of the mobile phone is displayed horizontally;
// Y: Portrait throughout the mobile phone screen;
// Z: Vertical Mobile Phone screen.
// Because some devices do not exclude the influence of gravity, two attributes are returned for this event:
// 1. accelerationIncludingGravity (acceleration with gravity)
// 2. acceleration (excluding the acceleration caused by gravity) </p> <p> // As a coders, the code above is the most direct. come on, the Code starts! </P> <p> // first, listen to motion sensing events on the page.
Function init (){
If (window. DeviceMotionEvent ){
// Mobile browsers support motion sensing events
Window. addEventListener ('deviceid', deviceMotionHandler, false );
$ ("# Yaoyiyaoyes"). show ();
} Else {
// Mobile Browsers Do not support motion sensing events
$ ("# Yaoyiyaono"). show ();
}
} </P> <p> // then, how do we calculate whether the user is shaking the mobile phone? Consider the following:
// 1. In fact, users always shake their mobile phones in one direction;
// 2. When the user shakes the mobile phone, there will be a corresponding speed change in the x, y, and z directions;
// 3. Do not shake users' normal mobile phone movements (the mobile phone is placed in the pocket, and the acceleration changes when walking ).
// From the above three considerations, calculate the acceleration in three directions, measure them at intervals, and check their change rate in a fixed period of time, in addition, you need to determine a threshold value to trigger the operation after shaking. </P> <p> // first, define a shaking threshold.
Var SHAKE_THRESHOLD = 3000;
// Defines the time when a variable was last updated.
Var last_update = 0;
// Define the data of the three axes x, y, and z and record the last departure time.
Var x;
Var y;
Var z;
Var last_x;
Var last_y;
Var last_z; </p> <p> // Add a counter to increase the fun of this example.
Var count = 0; </p> <p> function deviceMotionHandler (eventData ){
// Obtain the acceleration of gravity
Var acceleration = eventData. accelerationIncludingGravity; </p> <p> // obtain the current time
Var curTime = new Date (). getTime ();
Var diffTime = curTime-last_update;
// Fixed time period
'If (diffTime> 100 ){
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 ){
// TODO: Here, you can perform Logical Data operations after a shake.
Count ++;
$ ("# Yaoyiyaoyes"). hide ();
$ ("# Yaoyiyaoresult"). show ();
$ ("# Yaoyiyaoresult" ).html ("Shake your sister! "+ Count +! ");
} </P> <p> last_x = x;
Last_y = y;
Last_z = z;
}
}
</Script>
<Div id = "yaoyiyaono" style = "font-size: 20px; margin: 10px; line-height: 35px; display: none;">
Brother, if you see me, it means you cannot shake it now, not that you are not qualified to use me, but: </br>
1. If you use a PC browser, I only love a mobile browser. </br>
2. If you are an Android mobile phone, I am sorry to tell you that the android browser has abandoned me. You can use third-party browsers such as UCWeb and chrome. </br>
3. If neither of the above two situations exists, I will only tell you: you have changed your mobile phone !!! </Br>
</Div>
<Div id = "yaoyiyaoyes" style = "font-size: 20px; margin: 10px; line-height: 50px; display: none;">
Let's shake it up, maybe there's a pure girl waiting for you!
</Div>
<Div id = "yaoyiyaoresult" style = "font-size: 20px; margin: 10px; line-height: 50px; display: none;"> </div>
<Script>
$ (Document). ready (function (){
Init ();
});
</Script>