Implementation of javascript html5 shake function_javascript skills

Through the information on the Internet and my own compilation, I wrote an introduction to the HTML shake function for technical backup.
Key points of knowledge

1. DeviceMotionEvent
This is a gravity sensing event supported by HTML5. For documentation, please see: http://w3c.github.io/deviceorientation/spec-source-orientation.html
Event introduction:
deviceorientation Provides the physical orientation information of the device, expressed as a series of rotation angles of the local coordinate system.
devicemotion Provides acceleration information for the device, expressed as cardi coordinates in the coordinate system defined on the device. It also provides the rate of rotation of the device in the coordinate system. If feasible, the event should provide acceleration information at the center of gravity of the device.
compassneedscalibration is used to notify the web site to calibrate the above event using compass information.

2. Event introduction
window.addEventListener("deviceorientation",function(event){// handle event.alpha, event.beta and event.gamma},true);

{alpha:90,
 beta:0,
 gamma:0};

This is the parameter returned by the deviceorientation event. In order to obtain the compass pointing, you can simply use 360 ​​degrees minus alpha. If it is parallel to a horizontal surface, its compass pointing is (360 - alpha). If the user is holding the device, the screen is in a vertical plane with the top of the screen pointing upward. The value of beta is 90, and alpha has nothing to do with gamma. The user holds the device and faces the alpha angle. The screen is in a vertical screen and the top of the screen points to the right. The direction information is as follows

{alpha:270- alpha,
 beta:0,
 gamma:90};

Register a devicemotion event receiver:

Copy code The code is as follows:

window.addEventListener("devicemotion",function(event){// Process event. acceleration, event.accelerationIncludingGravity, // event.rotationRate and event.interval},true);

Place the device on the vehicle, with the screen on a vertical plane, with the top facing upward, facing the rear of the vehicle. The vehicle is traveling at a speed v and turns to the right with a radius r. The device records acceleration and accelerationIncludingGravity at position x, and the device also records the negative value of rotationRate.gamma:

{acceleration:{x: v^2/r, y:0, z:0},
 accelerationIncludingGravity:{x: v^2/r, y:0, z:9.81},
 rotationRate:{alpha:0, beta:0, gamma:-v/r*180/pi}};

Function implementation

if(window.DeviceMotionEvent){
 window.addEventListener('devicemotion', YaoYiYao,false);
 }
 var speed =30;//speed
 var x = y = z = lastX = lastY = lastZ =0;
 function YaoYiYao(eventData){
 var acceleration =eventData.accelerationIncludingGravity;
 x = acceleration.x;
 y = acceleration.y;
 z = acceleration.z;
 if(Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed){
 //简单的摇一摇触发代码
 alert(1);
 }
 lastX = x;
 lastY = y;
 lastZ = z;
 }

First determine whether the browser supports this event.
YaoYiYao is used to detect whether the mobile phone is shaken. Specifically, it obtains the mobile phone's movement data and stores it in an external variable. When the shaking event is triggered next time, it determines whether the last shaking coordinates and the current shaking coordinates are in the same position. Frequently mobilized range: Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed
Basically, if this condition is met, the phone is in a shaking state. Just add the shaking code you want to execute in the if statement.

The above is the implementation idea of ​​html5 shake function. I hope it will be helpful to everyone's learning.