How to use Gravity Induction to realize Shake and change Color in html5 can be used as a lucky draw

This article introduces how to use gravity induction to realize shaking and changing color in html5. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Found a case from the Internet, which is used to shake and change color, which is very easy to use, but after the test, you need to pay attention to:

1. Ios or Android 4.0 or above is required to achieve functional applications.

2. If the judgment of z coordinate is added, the screen will change color indiscriminately, which is probably too sensitive. Or I can't find the right usage. I hope you can correct it.

3. With a slight change in this function, it can become a lottery method, which is more fashionable than turntable and scratch cards. Haha.

The code is as follows:

Var color = new Array ('red',' blue', 'yellow',' green','# 00fags,'# 0ff'); if (window.DeviceMotionEvent) {var speed = 25; var x = z = lastX = lastY = lastZ = 0; window.addEventListener ('devicemotion', function () {var acceleration = event.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; / / z = acceleration.z If (Math.abs (x-lastX) > speed | | Math.abs (y-lastY) > speed) {document.body.style.backgroundColor = color [Math.round (Math.random () * 10)% 6];} lastX = x; lastY = y; / / lastZ = z;}, false) } about how to use gravity induction to realize shake and change color in html5 can be used as a lucky draw to share here. I hope the above content can be helpful to everyone and learn more knowledge. If you think the article is good, you can share it for more people to see.