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


Posted in HTML / CSS onNovember 07, 2019

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下才可触发监听事件

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

HTML / CSS 相关文章推荐
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 #HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 #HTML / CSS
跨域修改iframe页面内容详解
Oct 31 #HTML / CSS
html如何对span设置宽度
Oct 30 #HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 #HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 #HTML / CSS
Html5与App的通讯方式详解
Oct 24 #HTML / CSS
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
xml+php动态载入与分页
2006/10/09 PHP
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
php中session使用示例
2014/03/29 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
json简单介绍
2008/06/10 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
Python读取csv文件实例解析
2019/12/30 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
校园十大歌手策划书
2014/02/01 职场文书
立志成才演讲稿
2014/09/04 职场文书
房屋出租委托书格式
2014/09/23 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript