This article shares the principle of JS implementing WeChat shake for your reference. The specific content is as follows
Implementation principle:
1. The WeChat shake event requires hardware support, and a gyroscope must be required in the mobile phone.
2. Add to window in JSondevectionmotionevent. The event shaking when the phone is running, that is, the gyroscope in the phone rotates, and the event will trigger
3. Triggering the ondevectionmotion event will generate an event object, passing through the key value in the object (accelerationIncludingGravity) to obtain the gravity accelerator object
4. The gravity accelerator object contains the coordinates of the gyroscope. The current coordinates of the gyroscope are obtained through the gravity accelerator object.x - .y - .z.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Shake WeChat</title>
</head>
<body>
<!--Please shake-->
</body>
<script type="text/javascript">
function randomNum(m,n){
return ((n - m + 1) + m);
}
//cover set background size //Scale the background image according to the width and height of the label where it is located, and scale it = "cover";
//Set the background image of the body = "url(img/)" ;
//Event device: Triggering this event requires hardware support //Shake function: //1. The gyroscope in the mobile phone accelerates twice. When the difference in the accelerator reaches a certain value, it is considered to be a mobile phone shaking event. //2. Before setting the mobile phone shaking event, get the accelerator value //3. Add mobile phone shaking event; //Get the accelerator value before the mobile phone shakes, create an object to obtain var currentValue = {
x : 0,
y : 0,
z : 0
};
//Get the accelerator value after the phone is shaken, create an object to obtain var lastValue = {
x : 0,
y : 0,
z : 0
}
//Set the minimum distance for shaking. Only when this distance is reached will the shake event be executed var minValue = 20;
//When the mobile phone triggers the shake event, we get the location information at this time and store it on a p tag //Theoretically: the accelerator in a gyroscope event cannot be stationary; var p1 = ("p");
//The first method: var img1 = ("img");
= "375px";
= "560px";
//Mobile phone shaking incident = function(e){
//Get object var event1 = event || e;
//Get the accelerator object, in order to obtain the coordinate information on the gyroscope var acceleration = ;
//Record the current accelerator value = ;
= ;
= ;
//Judge the WeChat shake event (whether the phone is shaking) if (( - ) >= minValue || ( - ) > minValue || ( - ) > minValue) {
//Instruction Shake event triggers //Realize WeChat to shake, and you can use the shaking image as the background image of the body //Subscript of a random image (1 - 5) var ranN = randomNum(1,6);
//Create a timer var timer = setInterval(function(){
ranN ++
if (ranN == 6) {
ranN = 1;
}
//Set the background image for the current body // = "url(img/"+ranN+".jpg)";
//Set the path for the current img = "img/"+ranN+".jpg";
},200);
//Set a delay, eliminate the delay after a period of delay setTimeout(function(){
clearInterval(timer);
},1000);
}
//Record the last value (save the accelerator value in the last shaking event) = ;
= ;
= ;
}
(img1);
</script>
</html>
Note: There is no uploading image in this code. If you need to run it, you need to create an img folder in the same directory as the code, and place an image with the suffix of .jpg from 1 to 6.