vue.js中H5使用微信摇一摇抽奖,判断摇一摇次数

60 篇文章 6 订阅
43 篇文章 2 订阅

微信摇一摇抽奖:

export default {
		data() {
			return {
				SHAKE_THRESHOLD:4000,//定义一个摇动的值
				last_update :0,//定义一个变量保存上次更新的时间
				x:0, //定义xyz记录三个轴的数据以及上一次出发的时间
				y:0, 
				z:0,
				last_x :0,
				last_y :0, 
				last_z :0,
				count:0,//次数
			}
		},
		methods: {
			luckDraw() {
				//抽奖函数
			},
			deviceMotionHandler(eventData) {
				 let acceleration =eventData.accelerationIncludingGravity;//含重力加速度
				 let curTime = new Date().getTime();//获取当前时间
				if ((curTime-this.last_update)> 10) {//curTime - last_update 是固定时间段
					let diffTime = curTime -this.last_update;
					 this.last_update = curTime;
					 this.x = acceleration.x;
					 this.y = acceleration.y;
					 this.z = acceleration.z;
					 let 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) {
						 this.count++;//次数自增1
						 if(this.count > 1){
						 	return false;
						 }else{
							this.luckDraw();//抽奖
						 }
					 }
					 this.last_x = this.x;
					 this.last_y = this.y;
					 this.last_z = this.z;
				 }
			}
		},
		mounted() {
			const _this = this;
	
			if (window.DeviceMotionEvent) {
				window.addEventListener('devicemotion',_this.deviceMotionHandler,false);
			}
		},
                beforeDestroy(){
			window.removeEventListener('devicemotion',function () {}, false);
			this.count = 2;
		}
	}

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值