How to realize the shaking event of Mobile phone in html5

This article mainly shows you "how to realize the shaking event of mobile phone in html5". The content is simple and clear. I hope it can help you solve your doubts. Let the editor lead you to study and learn this article "how to realize shaking event of mobile phone in html5".

MDN address:

Https://developer.mozilla.org/zh-CN/docs/Web/API/DeviceMotionEvent/DeviceMotionEvent

The following is the vue implementation code:

Skip ads ({{time}})

Cash

Import {setTimeout} from "timers"; import config from ".. / utils/config.js"; export default {name: "Shake", data () {return {time: 5, show: true, shake: false, SHAKE_THRESHOLD: 3000, last_update: 0, last_x: 0, last_y: 0, last_z: 0, publicDir: config.publicDir} }, mounted () {this.init (); this.countDown ();}, methods: {/ / advertisement countdown countDown () {setTimeout () = > {if (this.time)

< 1) { this.show = false; } else { this.time--; this.countDown(); } }, 1000); }, // 显示广告 showPopup() { this.show = true; }, // 隐藏广告 hideAD() { this.show = false; }, // 开启图片摇动效果 shakeImg() { if (!this.show) { this.shake = true; this.$refs.musicBox.play(); window.removeEventListener("devicemotion", this.deviceMotionHandler, false); setTimeout(() =>

{this.shake = false; this.routerPush ("/ RedBag");}, 2000);}}, / / Route Jump routerPush (path, query) {this.$router.push ({path, query}) }, / / initialize shake, add shake monitor init () {this.last_update = new Date (). GetTime (); if (window.DeviceMotionEvent) {window.addEventListener ("devicemotion", this.deviceMotionHandler, false);} else {alert ("not support mobile event") }}, / / shake event callback function deviceMotionHandler (eventData) {var acceleration = eventData.accelerationIncludingGravity; var curTime = new Date (). GetTime (); if (curTime-this.last_update > 100) {var diffTime = curTime-this.last_update; this.last_update = curTime; var x = 0, y = 0, z = 0 X = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = (Math.abs (x + y + z-this.last_x-this.last_y-this.last_z) / diffTime) * 10000 If (Number (speed) > Number (this.SHAKE_THRESHOLD)) {/ / is judged to be this.shakeImg ();} this.last_x = x; this.last_y = y; this.last_z = z;}; # Shake {. Ad-box {width: 100vW; height: 100vh Img {width: 100%; height: 100%;}}. Skip-ad {position: fixed; top: 20px; right: 20px; color: white; background-color: rgba (0,0,0,0.2); padding: 10px 20px; border-radius: 10px;} .shake-page {width: 100vw; height: 100vh Background-image: url (".. / assets/img/shake/shake_bg.jpg"); background-size: 100% 100%; padding-top: 0.1 px; .shake-img {display: block; width: 469px; height: auto; margin: auto; margin-top: 350px; pointer-events: auto;}} .cash-withdrawal-btn {color: white Position: fixed; border: 1px solid # eee; padding: 5px 40px; border-radius: 25px; top: 30px; right: 20px;}. Display-horizontal-move {display: inherit; transform-origin: center center; animation-play-state: running; animation-name: shake-horizontal; animation-duration: 100ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite } @ keyframes shake-horizontal {2% {transform: translate (- 7px, 0) rotate (0);} 4% {transform: translate (- 5px, 0) rotate (0);} 6% {transform: translate (4px, 0) rotate (0); 8% {transform: translate (- 4px, 0) rotate (0) } 10% {transform: translate (- 6px, 0) rotate (0);} 12% {transform: translate (2px, 0) rotate (0);} 14% {transform: translate (- 5px, 0) rotate (0);} 16% {transform: translate (- 3px, 0) rotate (0);} 18% {transform: translate (2px, 0) rotate (0) } 20% {transform: translate (3px, 0) rotate (0);} 22% {transform: translate (- 2px, 0) rotate (0);} 24% {transform: translate (- 3px, 0) rotate (0);} 26% {transform: translate (- 9px, 0) rotate (0);} 28% {transform: translate (2px, 0) rotate (0) } 30% {transform: translate (7px, 0) rotate (0);} 32% {transform: translate (2px, 0) rotate (0);} 34% {transform: translate (0px, 0) rotate (0);} 36% {transform: translate (- 1px, 0) rotate (0);} 38% {transform: translate (6px, 0) rotate (0) } 40% {transform: translate (- 7px, 0) rotate (0);} 42% {transform: translate (0px, 0) rotate (0);} 44% {transform: translate (- 1px, 0) rotate (0); 46% {transform: translate (- 2px, 0) rotate (0);} 48% {transform: translate (10px, 0) rotate (0) } 50% {transform: translate (- 8px, 0) rotate (0);} 52% {transform: translate (- 9px, 0) rotate (0);} 54% {transform: translate (9px, 0) rotate (0);} 56% {transform: translate (- 2px, 0) rotate (0);} 58% {transform: translate (- 5px, 0) rotate (0) } 60% {transform: translate (2px, 0) rotate (0);} 62% {transform: translate (- 4px, 0) rotate (0);} 64% {transform: translate (1px, 0) rotate (0);} 66% {transform: translate (- 3px, 0) rotate (0);} 68% {transform: translate (10px, 0) rotate (0) } 70% {transform: translate (4px, 0) rotate (0);} 72% {transform: translate (- 6px, 0) rotate (0);} 74% {transform: translate (- 6px, 0) rotate (0); 76% {transform: translate (2px, 0) rotate (0);} 78% {transform: translate (- 2px, 0) rotate (0) } 80% {transform: translate (- 6px, 0) rotate (0);} 82% {transform: translate (- 1px, 0) rotate (0);} 84% {transform: translate (- 6px, 0) rotate (0);} 86% {transform: translate (- 5px, 0) rotate (0);} 88% {transform: translate (- 1px, 0) rotate (0) } 90% {transform: translate (- 1px, 0) rotate (0);} 92% {transform: translate (- 1px, 0) rotate (0);} 94% {transform: translate (- 3px, 0) rotate (0);} 96% {transform: translate (- 6px, 0) rotate (0);} 98% {transform: translate (- 6px, 0) rotate (0) 0%, 100% {transform: translate (0,0) rotate (0);}

Note: iphone needs to be under https to trigger listening events.

The above is all the contents of the article "how to realize the shaking event of Mobile phone in html5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!