HTML5 DeviceOrientation implements mobile website shake function code example_html5 tutorial skills

Make two statements before the introduction:

The following code can be run directly. Of course, don’t forget to quote jQuery.

Copy code

The code is as follows:

<script><br>// DeviceOrientation provides high-level encapsulation of the underlying direction sensor and motion sensor, providing support for DOM events. <br>// This feature includes two events: <br>// 1. deviceOrientation: an event that encapsulates the orientation sensor data, which can obtain the orientation data of the mobile phone when it is stationary (the angle, orientation and orientation of the mobile phone, etc.) . <br>// 2. deviceMotion: Encapsulates the events of the motion sensor and can obtain data such as motion acceleration when the mobile phone is in motion. <br>// Using these two events, you can easily implement interesting functions such as gravity sensing and compass. </p> <p>// Now there is a very common and fashionable function in many Native applications - shake to find people, shake to read news, shake to find gold coins. . . <br>// Maybe you already know this function very well on the android or ios client, but now, I will tell you how to implement the shake function on the mobile web page. </p> <p>// OK, let’s start now, hehe~<br>// Let’s first understand the device motion events——DeviceMotionEvent: Returns the relevant information about acceleration and rotation of the device, where the acceleration data includes The following three directions: <br>// x: horizontally across the phone screen; <br>// y: vertically across the phone screen; <br>// z: vertically across the phone screen. <br>// In view of the fact that some devices do not exclude the influence of gravity, this event will return two attributes: <br>// 1. accelerationIncludingGravity (acceleration including gravity) <br>// 2. acceleration (excluding the influence of gravity) Acceleration)</p> <p>// As a coder, the most direct way is to code. Come on and start coding! </p> <p>//First, listen for motion sensing events on the page<br>function init(){<br>　if (window.DeviceMotionEvent) {<br>　 // Mobile browsers support motion sensing events<br> window.addEventListener('devicemotion', deviceMotionHandler, false);<br>　$("#yaoyiyaoyes").show();<br>　} else{<br>　　 // Mobile browsers do not support motion sensing events<br>　　$("#yaoyiyaono").show();<br>　} <br>}</p> <p>// So, how do we calculate whether the user is shaking the phone? You can consider the following points: <br>// 1. In fact, when users shake their phones, they always shake in one direction; <br>// 2. When users shake their phones, they move in x, There will be corresponding changes in the speed in the three directions of y and z; <br>// 3. The user’s normal mobile phone movement behavior cannot be regarded as shaking (the phone is placed in the pocket, and the acceleration will also change when walking) ). <br>// Considering the above three points, calculate the acceleration in the three directions, measure them at intervals, examine their rate of change in a fixed period of time, and determine a threshold to trigger the operation after shaking. . </p> <p>// First, define a shaking threshold <br>var SHAKE_THRESHOLD = 3000;<br>// Define a variable to save the time of the last update <br>var last_update = 0;<br>// Tight Then define x, y, z to record the data of the three axes and the time of the last departure <br>var x;<br>var y;<br>var z;<br>var last_x;<br>var last_y;<br>var last_z;</p> <p>//In order to make this example a little more boring and interesting, add a counter <br>var count = 0;</p> <p>function deviceMotionHandler(eventData) {<br>　 // Get acceleration including gravity <br> var acceleration = eventData.accelerationIncludingGravity; </p> <p> // Get the current time <br> var curTime = new Date().getTime(); <br> var diffTime = curTime -last_update;<br> // Fixed time period <br> if (diffTime > 100) {<br>　last_update = curTime; </p> <p>　x = acceleration.x; <br>　y = acceleration.y; <br>　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) { <br>　　　 // TODO: Here you can implement the data logic operations to be performed after shaking <br> Count ;<br>　　$("#yaoyiyaoyes"). hide ();<br> }</p> <p>　last_x = x; <br> last_y = y; <br> last_z = z; ="font-size:20px;margin:10px;line-height:35px;display:none;"><br>Brother, if you see me, it means you can't shake it yet, but it doesn't mean you are not qualified to use me. , instead: </br><br>1. If you are using a PC browser, that is wrong. I only like mobile browsers; </br><br> 2. If you are using an Android phone, I am sorry to tell you that Android comes with The browser abandoned me, you can use third-party browsers such as UCWeb and chrome; </br><br> 3. If you do not fall into the above two situations, then I can only tell you: you need to change your mobile phone! ! ! </br><br></div><br><div id="yaoyiyaoyes" style="font-size:20px;margin:10px;line-height:50px;display:none;"> <br>Brother, shake one, maybe there will be a pure girl waiting for you!<br></div><br><div id="yaoyiyaoresult" style="font-size:20px;margin :10px;line-height:50px;display:none;"></div><br><script><br>$(document).ready(function(){<br>init();<br>});<br></script>