Html5监听手机摇一摇事件的实现

<template>  <div id="Shake">    <van-popup v-model="show">      <div class="ad-box">        <span class="skip-ad" @click="hideAD">跳过广告({{time}})</span>        <img src="../../../../assets/img/shake/shake_ad.jpg" alt>      </div>    </van-popup>    <div class="shake-page">      <span class="cash-withdrawal-btn">提现</span>      <img        class="shake-img shake-horizontal"        :class="shake?'shake-horizontal-move':''"        src="../../../../assets/img/shake/shake.png"        alt="摇一摇"        @click="shakeImg"      >    </div>    <audio      style="display: none;"      :src="publicDir + '/static/audio/5018.mp3'"      ref="musicBox"      preload="preload"      controls    ></audio>  </div></template><script>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: {    // 广告倒计时    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 = new Date().getTime();      if (window.DeviceMotionEvent) {        window.addEventListener(          "devicemotion",          this.deviceMotionHandler,          false        );      } else {        alert("not support mobile event");      }    },    // 摇一摇事件回调函数    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)) {          // 判断为摇一摇动作          this.shakeImg();        }        this.last_x = x;        this.last_y = y;        this.last_z = z;      }    }  }};</script><style lang="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: 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.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: 1px solid #eee;    padding: 5px 40px;    border-radius: 25px;    top: 30px;    right: 20px;  }  .shake-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);    }  }}</style>