这篇文章主要为大家展示了“在html5中如何实现手机摇一摇事件”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“在html5中如何实现手机摇一摇事件”这篇文章吧。

MDN地址：

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

下面为vue实现代码：

<template><divid="Shake"><van-popupv-model="show"><divclass="ad-box"><spanclass="skip-ad"@click="hideAD">跳过广告({{time}})</span><imgsrc="../../../../assets/img/shake/shake_ad.jpg"alt></div></van-popup><divclass="shake-page"><spanclass="cash-withdrawal-btn">提现</span><imgclass="shake-imgshake-horizontal":class="shake?'shake-horizontal-move':''"src="../../../../assets/img/shake/shake.png"alt="摇一摇"@click="shakeImg"></div><audio:src="publicDir+'/static/audio/5018.mp3'"ref="musicBox"preload="preload"controls></audio></div></template><script>import{setTimeout}from"timers";importconfigfrom"../../../../utils/config.js";exportdefault{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:{//广告倒计时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);}},//路由跳转routerPush(path,query){this.$router.push({path,query});},//初始化摇一摇，添加摇动监听init(){this.last_update=newDate().getTime();if(window.DeviceMotionEvent){window.addEventListener("devicemotion",this.deviceMotionHandler,false);}else{alert("notsupportmobileevent");}},//摇一摇事件回调函数deviceMotionHandler(eventData){varacceleration=eventData.accelerationIncludingGravity;varcurTime=newDate().getTime();if(curTime-this.last_update>100){vardiffTime=curTime-this.last_update;this.last_update=curTime;varx=0,y=0,z=0;x=acceleration.x;y=acceleration.y;z=acceleration.z;varspeed=(Math.abs(x+y+z-this.last_x-this.last_y-this.last_z)/diffTime)*10000;if(Number(speed)>Number(this.SHAKE_THRESHOLD)){//判断为摇一摇动作this.shakeImg();}this.last_x=x;this.last_y=y;this.last_z=z;}}}};</script><stylelang="less">#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:10px20px;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.1px;.shake-img{display:block;width:469px;height:auto;margin:auto;margin-top:350px;pointer-events:auto;}}.cash-withdrawal-btn{color:white;position:fixed;border:1pxsolid#eee;padding:5px40px;border-radius:25px;top:30px;right:20px;}.shake-horizontal-move{display:inherit;transform-origin:centercenter;animation-play-state:running;animation-name:shake-horizontal;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}@keyframesshake-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);}}}</style>

注意：iphone需要在https下才可触发监听事件

以上是“在html5中如何实现手机摇一摇事件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！