这篇文章主要为大家展示了“在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="../../../../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
: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中如何实现手机摇一摇事件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
