How to realize the Shake function of Wechat with JavaScript+H5
The knowledge of this article "how to use JavaScript+H5 to achieve Wechat shake function" is not understood by most people, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use JavaScript+H5 to achieve Wechat shake function" article.
The first step is to change the color by shaking the phone.
Shake the HTML5 phone var color = new Array ('# fff','# ff0','# f00mm,'# 000FFT,'# 00fff'); 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) 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;}, false);} shake the phone and change the screen color.
Mainly the DeviceMotionEvent events of mobile phones.
The second step is to shake the Wechat gesture.
Relative to the first step is to add a shake gesture to change the shaking event. Just add the method you want after the shake action, whether you want to go to the next self-made page or trigger a Controller event.
Shake var SHAKE_THRESHOLD = 1000; var last_update = 0; var last_time = 0; var x; var y; var z; var last_x; var last_y; var last_z; var sound = new Howl ({urls: ['/ shake/sound/shake_sound.mp3']}) .load () Var findsound = new Howl ({urls: ['/ shake/sound/shake_match.mp3']}). Load (); var curTime; var isShakeble = true; function init () {if (window.DeviceMotionEvent) {window.addEventListener ('devicemotion', deviceMotionHandler, false);} else {$("# cantshake"). Show ();} function deviceMotionHandler (eventData) {curTime = new Date (). GetTime () Var diffTime = curTime-last_update; if (diffTime > 100) {var acceleration = eventData.accelerationIncludingGravity; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs (x + y + z-last_x-last_y-last_z) / diffTime * 10000 If (speed > SHAKE_THRESHOLD & & curTime-last_time > 1100 & $("# loading"). Attr ('class') = = "loading" & & isShakeble) {shake ();} last_x = x; last_y = y; last_z = z;}} function shake () {last_time = curTime; $("# loading"). Attr (' class','loading loading-show') $("# shakeup"). Animate ({top: "10%"}, 700, function () {$("# shakeup"). Animate ({top: "25%"}, 700, function () {$("# loading"). Attr ('class','loading'); findsound.play () / / this is the event after shaking. Here, call the ControllergoShakeResult method _ window.location.href = "shakeController.do?goShakeResult&phoneNumber=$ {phoneNumber} & hdid=$ {hdid} & openid=$ {openid}";}) $("# shakedown") .animate ({top: "40%"}, 700, function () {$("# shakedown"). Animate ({top: "25"}, 700, function () {});}); sound.play ();} / various initializations $(document) .ready (function () {Howler.iOSAutoEnable = false; FastClick.attach (document.body)) Init ();}
You can also shake the correct posture today: hold the phone tightly, shake it forcefully for 3 seconds, and the unicorn arm, which has been practicing for 18 years, finally comes in handy.
Sometimes you can really use a different way to achieve the function you want. Figure: the original effect of demo is:
The above is about "how to use JavaScript+H5 to achieve Wechat shake function" this article content, I believe we all have a certain understanding, I hope the editor to share the content to help you, if you want to know more related knowledge content, please follow the industry information channel.
