今天小编跟大家讲解下有关Html5监听手机摇一摇事件的实现 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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=http://www.8mtime.com/skin/st06hongwskin/image/nopic.gif 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=http://www.8mtime.com/skin/st06hongwskin/image/nopic.gif alt="摇一摇" @click="shakeImg" > </div> <audio style="display: none;" :src=http://www.8mtime.com/skin/st06hongwskin/image/nopic.gif + '/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下才可触发监听事件
以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
