一、devicemotion事件

window 对象中devicemotion事件，它封装了运动传感器数据的事件，可以用来监听设备的加速度变化等信息。devicemotion事件对象有acceleration、accelerationIncludingGravity、rotationRate和interval四个属性

window.addEventListener("devicemotion", (e) => {console.log(e)});

注意：本地测试无法打印出来的时候请注意啦，devicemotion事件要在线上并且的https协议的域名才有效
acceleration（速度）和accelerationIncludingGravity（重力加速度）这两者的属性都包含三个轴：X轴、Y轴、Z轴，区别是阿acceleration是监听手机目前的移动速度，accelerationIncludingGravity监听的是手机的重力反应

rotationRate(旋转速度)

提供了设备在 alpha，beta， gamma轴方向上旋转的速率的对象。旋转速率的单位为度每秒

alpha: 设备沿着垂直屏幕的轴的旋转速率
beta: 设备沿着屏幕左至右方向的轴的旋转速率
gamma: 设备沿着屏幕下至上方向的轴的旋转速率

interval(时间间隔)

表示从设备获取数据的间隔时间，单位是毫秒

二、苹果机ios13.3以上的机子不能直接监听devicemotion事件，需要用户手动同意开启权限才可以

IOS 13 之后新增的一个方法用来获取用户权限，获取到用户权限之后，我们就可以来检测加速度了，但是注意该方法是 IOS 13 之后才有的，在 IOS 13 之前这么写的话，DeviceMotionEvent下并没有requestPermission方法就会报错

判断苹果13的方法

 var system = navigator.userAgent.toLowerCase();if (system.indexOf("like mac os x") > 0) {// 苹果机var reg = /os [\d._]*/gi;var info = system.match(reg);var version = (info + "").replace(/[^0-9|_.]/gi, "").replace(/_/gi, ".");var list = version.split(".");// 苹果13手机 list[0]  16 list[1] 0// 对苹果13以后的版本处理if (list[0] > 15) {if (typeof DeviceMotionEvent !== "undefined" &&typeof DeviceMotionEvent.requestPermission === "function") {//要授权了哦}} else {if (window.DeviceMotionEvent) {//监听设备运动window.addEventListener("devicemotion", (e) => {console.log(e)});}}}

授权方法：

window.DeviceOrientationEvent.requestPermission().then((state) => {if (state === "granted") {// 监听传感器运动事件if (window.DeviceMotionEvent) {window.addEventListener("devicemotion", (e) => {console.log(e)});} else {alert("手机不支持陀螺仪功能哦");}} else if (state === "denied") {alert("拒绝授权");} else if (state === "prompt") {alert("你对手机做了啥");}});

完整代码：

<template><div class="yao-box"><div class="img"><img id="yaoyiyao" src="../assets/shou.png" alt /><div class="tip" v-if="isAuth">晃动你的屏幕开始摇一摇吧</div></div><div class="cover-box" v-if="!isAuth"><div class="btn" @click="getAuth">获取一下你的权限哦</div></div></div>
</template>
<script>
export default {data() {return {num: 10000, //抽奖次数SHAKE_THRESHOLD: 8000, //动摇阀值，越高需要摇摆的幅度越大loading: false, //防止摇摆过程中造成的误操作last_update: 0, // 记录最后一次摇一摇的时间x: 0,y: 0,z: 0,last_x: 0,last_y: 0,last_z: 0,isAuth: true, // 已经授权};},mounted() {this.init();},//页面销毁时beforeDestroy() {window.removeEventListener("devicemotion", this.devicemotion, false);},methods: {init() {var system = navigator.userAgent.toLowerCase();if (system.indexOf("like mac os x") > 0) {// 苹果机var reg = /os [\d._]*/gi;var info = system.match(reg);var version = (info + "").replace(/[^0-9|_.]/gi, "").replace(/_/gi, ".");var list = version.split(".");// 苹果13手机 list[0]  16 list[1] 0// 对苹果13以后的版本处理if (list[0] > 15) {if (typeof DeviceMotionEvent !== "undefined" &&typeof DeviceMotionEvent.requestPermission === "function") {this.isAuth = false;}} else {if (window.DeviceMotionEvent) {//监听设备运动window.addEventListener("devicemotion", this.devicemotion, false);}}} else {//判断设否授权了 设备运动权限if (window.DeviceMotionEvent) {//监听设备运动window.addEventListener("devicemotion", this.devicemotion, false);}}},// 设备运动 方法devicemotion(event) {//获取加速度信息//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。var acceleration = event.accelerationIncludingGravity;var curTime = new Date().getTime();// 最低间隔一秒if (curTime - this.last_update > 1000) {var diffTime = curTime - this.last_update;this.last_update = curTime;this.x = acceleration.x;this.y = acceleration.y;this.z = acceleration.z;var speed =(Math.abs(this.x + this.y + this.z - this.last_x - this.last_y - this.last_z) /diffTime) *10000;//而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。if (speed > this.SHAKE_THRESHOLD) {if (this.num <= 0 && !this.loading) {alert("抽奖次数用完了");} else {if (!this.loading) {var block = document.getElementById("yaoyiyao");block.classList.add("play");setTimeout(() => {alert("你中奖啦！"); // Do somethingblock.classList.remove("play");this.loading = false;}, 1500);this.num -= 1;this.loading = true;}}}this.last_x = this.x;this.last_y = this.y;this.last_z = this.z;} else {this.$toast.fail("不要太频繁哦");// this.$message({title})}},getAuth() {let that = this;window.DeviceOrientationEvent.requestPermission().then((state) => {if (state === "granted") {// 监听传感器运动事件if (window.DeviceMotionEvent) {that.isAuth = true;window.addEventListener("devicemotion", this.devicemotion);} else {alert("手机不支持陀螺仪功能哦");}} else if (state === "denied") {alert("拒绝授权");} else if (state === "prompt") {alert("你对手机做了啥");}});},},
};
</script><style lang="less" scoped>
.yao-box {width: 100vw;height: 100vh;overflow: hidden;
}
.img {height: 15rem;text-align: center;margin-top: 12rem;img {display: inline-block;height: 100%;}
}
.play {animation: play 0.3s linear 4;
}
.tip {font-size: 1.5rem;text-align: center;margin-top: 4rem;
}
@keyframes play {25% {transform: rotate(-40deg);}75% {transform: rotate(40deg);}100% {transform: rotate(0deg);}
}
.cover-box {width: 100vw;height: 100vh;position: absolute;top: 0;left: 0;background: rgba(0, 0, 0, 0.5);.btn {width: 80%;height: 4rem;background: #06ae56;line-height: 4rem;text-align: center;border-radius: 4rem;margin: 50vh 10vw;color: #fff;font-size: 1.5rem;}
}
</style>

图片文件：

vue项目实现摇一摇h5相关推荐

vue.js中H5使用微信摇一摇抽奖，判断摇一摇次数
微信摇一摇抽奖: export default {data() {return {SHAKE_THRESHOLD:4000,//定义一个摇动的值last_update :0,//定义一个变量保存上次更 ...
微信摇一摇效果HTML,JavaScript+H5实现微信摇一摇功能
项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动.也一直在做微信公众号的东西,但是要调用微信摇一摇的接口还是有些困难,因为只提供了摇一摇周边,附近的人以及一系列的红包页面,相对 ...
php微信摇一摇,怎样使用JS+H5实现微信摇一摇
这次给大家带来怎样使用JS+H5实现微信摇一摇,使用JS+H5实现微信摇一摇的注意事项有哪些,下面就是实战案例,一起来看一下. 项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动 ...
开源免费，捷微H5活动平台（微砍价、九宫格、斧头帮、摇一摇送卡券） h5huodong.com
捷微H5营销活动平台(h5huodong.com) 特点:(采用插件模式开发H5营销活动,独立部署,解决微信活动大用户.高并发问题) 源码下载:https://gitee.com/jeecg/h5hu ...
开源免费，捷微H5活动平台（微砍价、九宫格、斧头帮、摇一摇送卡券） h5huodong.com...
捷微H5营销活动平台(h5huodong.com) 特点:(采用插件模式开发H5营销活动,独立部署,解决微信活动大用户.高并发问题) 源码下载:http://git.oschina.net/jeecg ...
IOS系统中H5页面实现摇一摇功能
公司准备开年会了,年会活动用了一套别人的系统,根据测试,有些游戏的摇一摇功能在IOS上无法使用,为了修复该功能,踩了一些坑,特此记录如下: 1. 因为IOS系统的安全要求,项目必须是在https的域名 ...
微信——H5实现微信摇一摇
项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动.也一直在做微信公众号的东西,但是要调用微信摇一摇的接口还是有些困难,因为只提供了摇一摇周边,附近的人以及一系列的红包页面,相对 ...
vue如何在一个工程里判断h5还是pc，（利用在一个页面显示不同router-view内容原理，本文只使用于单页面项目，多页面项目请查看我另一篇博文）
本文只适用于单页面项目,多页面项目请查看我另一篇博文 vue如何在一个工程里显示pc和手机端(适用多页面复杂项目) https://blog.csdn.net/qq_37816525/article/ ...
微信摇一摇抽奖的H5制作思路
第一步微信授权登录,获取用户的微信信息,并写入数据库,相当于摇奖已经有了用户基础. 第二步页面出现一个手机摇动的CSS3动画,提示用户摇奖,每天可以设定摇奖交数,超过次数提醒用户分享好友,好友拉新 ...

vue项目实现摇一摇h5