<!DOCTYPE HTML> <HTMLLang= "en"> <Head> <MetaCharSet= "Utf-8"> </Head> <Body> <DivID= "status"></Div> </Body> <Script> varShake=4000, Last_update=0, Count=0, x=y=Z=last_x=last_y=last_z=0; if(window. Devicemotionevent) {Window.addeventlistener ("devicemotion", Devicemotionhandler,false); }Else{alert ("This device does not support Devicemotion events"); } console.log (NewDate (). ValueOf ()); functionDevicemotionhandler (eventData) {varAcceleration=eventdata.accelerationincludinggravity, Currtime=NewDate (). ValueOf (), Difftime=Currtime-last_update; if(Difftime> -) {last_update=Currtime; X=acceleration.x; Y=ACCELERATION.Y; Z=acceleration.z; var Speed=Math.Abs (x+y+Z-last_x-last_y-last_z)/difftime*10000 varStatus=document.getElementById ("Status"); if( speed>Shake) {Count++; Status.innerhtml= "you shook it."+Count+"Times" ; } last_x=x; Last_y=y; Last_z=Z; } } </Script> </HTML>
Devicemotion Gets the device acceleration information. Its event object returns 3 values, but I use accelerationincludinggravity to consider the effects of gravity. The gravitational value of the earth is 9.81. The z axis of the return is 9.81, but the positive and negative levels are shown in Android, which is +9.81 in the Apple Display-9.81 (most certainly no effect on our calculations, but write it out to let everyone know, lest there is doubt in the test).
Note: The units of the returned x, y, Z attribute values are m/s^2
Acceleration
This attribute is not considered the effect of gravity, very strange, I also wonder why out of two standards. Is this a consideration in a vacuum?
OK, let's say our code.
A threshold of 4000 is set (that is, when the acceleration reaches this value, it triggers the program to shake).
Gets the last time last_update.
Set a count to tell everyone how many times you shook it.
Initializes the accelerated reads for each axis, as well as the last accelerated last_x,last_y,last_z.
Event binding to window if the device supports devicemotionevent.
Gets the current time currtime.
Gets the Accelerationincludinggravity property of the current event object.
Get and judge the acceleration of x, Y, Z every 100 milliseconds.
The speed at which one of the acceleration speeds has reached the threshold of 4000.
If you reach it, start shaking the event.
Finally, the speed value of x, Y, Z is copied to last_x,y,z.
This is how the code is parsed.
H5 realize the phone shake a shake
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
