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

The knowledge of this article "how to use html5's DeviceOrientation to achieve Wechat shake function" is not understood by most people, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use html5's DeviceOrientation to achieve Wechat shake function" article.

In HTML5, the DeviceMotion event provided by the DeviceOrientation feature encapsulates the motion sensor time of the device, and the data such as motion state and acceleration of the device can be obtained by changing the time (and the deviceOrientation event provides information such as device angle, orientation, etc.).

Through the judgment of the moving state of the equipment by DeviceMotion, it can help us to achieve the interactive effect of "shaking" on the web page.

Sports event monitoring

Copy the code

The code is as follows:

If (window.DeviceMotionEvent) {

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

} else {

Alert ('your phone is too bad, buy a new one.')

}

Get acceleration information

The action of "shaking" is that the equipment has a certain distance in a certain period of time, so by monitoring the change rate of the x, y, z values obtained in the previous step in a certain time range, we can judge whether the equipment is shaking or not. In order to prevent the miscalculation of normal movement, it is necessary to set an appropriate critical value for the rate of change.

Copy the code

The code is as follows:

Function deviceMotionHandler (eventData) {

Var acceleration = eventData.accelerationIncludingGravity

Var curTime = new Date () .getTime ()

If ((curTime-last_update) > 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

Var status = document.getElementById ("status")

If (speed > SHAKE_THRESHOLD) {

DoResult ()

}

Last_x = x

Last_y = y

Last_z = z

}

}

The above is about "how to use html5 DeviceOrientation to achieve Wechat shake function" this article content, I believe we all have a certain understanding, I hope the editor to share the content to help you, if you want to know more related knowledge content, please 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.