Html5监听手机摇一摇事件的实现
程序员文章站
2022-03-19 10:21:07
这篇文章主要介绍了Html5监听手机摇一摇事件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 19-11-07...
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实现类似微信手机摇一摇功能(计算摇动次数)
-
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
-
html5的pushstate以及监听浏览器返回事件的实现
-
Html5监听手机摇一摇事件的实现
-
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
-
html5的pushstate以及监听浏览器返回事件的实现
-
用HTML5实现手机摇一摇的功能的教程_html5教程技巧
-
如何通过html5实现摇一摇的功能
-
利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖
-
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例_html5教程技巧