Often we play micro-mail will be used to find people in the vicinity, are in the app to achieve the function of mobile phone shake. Now, we move this technology to the mobile web for everyone to learn, mainly using the HTML5 important feature is deviceorientation: Official documents
It provides advanced encapsulation of the underlying directional sensors and motion sensors, providing support for DOM events. This feature includes two types of events:
Deviceorientation: The event that encapsulates the directional sensor data, can obtain the direction data of the mobile phone in the static state, for example the mobile phone's angle, azimuth, orientation and so on.
Devicemotion: The event that encapsulates the motion sensor data, can obtain the motion acceleration and so on motion state of the mobile phone data.
Using it we can easily achieve gravitational induction, compass and other interesting functions, on the phone will be very useful. For example, the opera H5 experience version of the gravitational induction ball example is by listening to the Deviceorientation API Deviceorientation event to achieve.
Let's get started!
Devicemotionevent (Device motion event) The return device has information about acceleration and rotation. The acceleration data will consist of three axes: X,y and Z (as shown in the following image, the x-axis is transverse through the phone screen or notebook keyboard, and the y-axis is vertically running through the phone screen or notebook keyboard, and the z axis is perpendicular to the phone screen or notebook keyboard). Because some devices may not have hardware to rule out the effects of gravity, the event returns two properties, accelerationincludinggravity (acceleration with gravity) and Acceleration (acceleration), which excludes the effect of gravity.
Let's listen to the motion sensing event first.
1
2
3
if (window. Devicemotionevent) {
Window.addeventlistener (' devicemotion ', Devicemotionhandler, false);
}
And then get the acceleration that contains gravity.
1
2
3
function Devicemotionhandler (eventdata) {
var acceleration =eventdata.accelerationincludinggravity;
}
Here's how we calculate the principle of the user shaking the phone. The main points to consider are as follows:
1, most of the time users are in a direction mainly shaking mobile phones to carry out shaking;
2, the acceleration data in three directions during shaking will change;
3, we can not misjudge the normal behavior of mobile phones, think about it, if your cell phone in the trouser pocket, walking it will also have the acceleration data changes.
In summary, we should calculate the acceleration in three directions, measure them at intervals, examine their rate of change in a fixed time period, and need to set a threshold for it to trigger the action.
We need to define several variables to record the history x, y, z-axis data, and the time of the last trigger. The core method implementation code is as follows:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21st
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 ("You shook it!");
}
last_x = x;
last_y = y;
Last_z = Z;
}
}
Complete code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21st
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!doctype html>
<meta charset= "Utf-8"/>
<meta name= "viewport" content= "width=device-width,initial-scale=1.0"/>
<title> Mobile Web Shake </title>
<script type= "Text/javascript" src= "Jquery-1.11.1.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {
Defining a pre-prepared function
var IMGs = new Array (
' Baidu_jgylogo3.gif ',//Baidu logo
' Cnzz-logo.gif ',//CNZZ logo
' Qqlogo_2x.png ',//QQ logo
' logo.gif ',//163logo
' Logo_1x.png '//Sina LOGO
);
Determine if the phone is moving to support the sensor
if (window. Devicemotionevent) {
var speed = 25; Define the default acceleration, at this speed to perform a shake
X,y represents the current left,
Lastx,lasty indicates the coordinates of the last stay after shaking
var x = y = z = lastx = lasty = Lastz = 0;
Monitor Device Motion Events
Window.addeventlistener (' Devicemotion ', function () {
var acceleration = event.accelerationincludinggravity; Get the acceleration of a device
x = acceleration.x; Gets the x axis of the acceleration, which is used to compute horizontal horizontal acceleration
y = acceleration.y; Gets the y-axis of the acceleration, which is used to calculate the acceleration in the vertical direction while calculating the positive value
Calculates whether the current acceleration is greater than the default acceleration
if (Math.Abs (X-LASTX) > Speed Math.Abs (y-lasty) > Speed) {
Shake and change the logo
$ (' body '). CSS (' background ', ' url (' + Imgs[math.round (math.random () *)% 5] + ') no-repeat center 120px ');
}
Re-record the last value as the next start coordinate
LASTX = x;
Lasty = y;
}, False);
}
})
</script>
<body>
<div class= "Picbox" id= "Picbox" ></body>
On the phone to open on it, don't forget to quote jquery, of course, directly modify the native JS.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
