• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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下才可触发监听事件

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

    上一篇:解决HTML5中的audio在手机端和微信端的不能自动播放问题
    下一篇:Canvas环形饼图与手势控制的实现代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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