Shulou(Shulou.com)06/02 Report--

This article will introduce in detail for you "Html5+JS how to achieve mobile phone shake function", the content steps are clear and detailed, and the details are handled properly, and the editor will update different knowledge points every day. I hope this article "how to achieve mobile phone shake function in Html5+JS" can give you unexpected gains. Please follow the editor's ideas slowly and deeply, as follows, let's go to harvest new knowledge.

One of the important features of HTML5 is DeviceOrientation, which encapsulates the underlying direction sensor and motion sensor and provides support for DOM events. This feature includes two types of events:

1. DeviceOrientation: events that encapsulate the direction sensor data can obtain the direction data of the phone at rest, such as the phone's angle, orientation, orientation, and so on.

2. DeviceMotion: the events that encapsulate the motion sensor data can obtain the motion acceleration and other data of the mobile phone in the motion state. With it, we can easily achieve gravity sensing, compass and other interesting functions, which will be very useful on mobile phones. For example, the gravity sensor ball example in the Opera H5 experience version is implemented by listening for DeviceOrientation API's deviceOrientation event. In fact, it can also help us to achieve a very common and fashionable function in a mobile app 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: XMagol y and z (shown below, the x-axis horizontally runs through the phone screen or laptop keyboard, the y-axis runs longitudinally through the phone screen or laptop keyboard, and the z-axis is perpendicular to the phone screen or laptop keyboard). Because some devices may not have the hardware to eliminate the influence of gravity, this event returns two properties, accelerationIncludingGravity (acceleration with gravity) and acceleration (acceleration), which excludes the influence of gravity.

1. [code] listen for motion sensing events

two。 [code] get acceleration with gravity

3. [code] Core method implementation code

One of the important features of HTML5 is DeviceOrientation, which encapsulates the underlying direction sensor and motion sensor and provides support for DOM events. This feature includes two types of events:

1. DeviceOrientation: events that encapsulate the direction sensor data can obtain the direction data of the phone at rest, such as the phone's angle, orientation, orientation, and so on.

2. DeviceMotion: the events that encapsulate the motion sensor data can obtain the motion acceleration and other data of the mobile phone in the motion state.

With it, we can easily achieve gravity sensing, compass and other interesting functions, which will be very useful on mobile phones. For example, the gravity sensing ball example in the Opera H5 experience version is by listening to DeviceOrientation.

The deviceOrientation event of API.

In fact, it can also help us to achieve a very common and fashionable function in a mobile app 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: XMagol y and z (shown below, the x-axis horizontally runs through the phone screen or laptop keyboard, the y-axis runs longitudinally through the phone screen or laptop keyboard, and the z-axis is perpendicular to the phone screen or laptop keyboard). Because some devices may not have the hardware to eliminate the influence of gravity, this event returns two properties, accelerationIncludingGravity (acceleration with gravity) and acceleration (acceleration), which excludes the influence of gravity.

1. [code] listen for motion sensing events

The code is as follows:

If (window.DeviceMotionEvent) {

Window.addEventListener ('devicemotion',deviceMotionHandler, false)

}

two。 [code] get 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

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

}

}

Thank you for reading this. The editor hopes that you will have the most profound experience from the practical level on the key issue of "how to realize the shaking function of the Html5+JS phone". The specific usage also requires everyone to practice and use it in order to understand it. If you want to read more related articles, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.