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

MDN地址：

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

下面为vue实现代码

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>
    

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！