一个html5摇一摇抽奖页面的开发

HTML/CSS 前端客 1449℃ 1评论

工作原因,开发个摇一摇抽奖页面,核心代码就是调用html api,检测手机加速度传感器。
图片资源有自己做的,也有网上搜罗的。
废话不多说,效果如图:

核心代码如下:

if (window.DeviceMotionEvent) {
		window.addEventListener('devicemotion', deviceMotionHandler, false);
		var THRESHOLD = 1000; //speed
		var lastTime = 0; // 上次更新时间
		var x = y = z = lastX = lastY = lastZ = 0;

		function deviceMotionHandler(eventData) {
			var acceleration = eventData.accelerationIncludingGravity;
			var curTime = new Date().getTime();
			var diffTime = curTime - lastTime;
			if (diffTime > 100) {
				lastTime = curTime;
				x = Math.abs(acceleration.x);
				y = Math.abs(acceleration.y);
				z = Math.abs(acceleration.z);
				var accelerationDiff = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
				if (accelerationDiff > THRESHOLD) {
					shakeAction();
					//$('.red-ss-bg').click()
				}
				lastX = x;
				lastY = y;
				lastZ = z;
			}
		}
	} else {
		alert('您的设备暂时无法摇一摇,您可以点击手机图标抽奖');
	}

源码下载:
链接: https://pan.baidu.com/s/1mh7EPi4
密码: f3ns
压缩密码:qdker.com

版权所有,转载请注明:前端客 » 一个html5摇一摇抽奖页面的开发
喜欢 (4)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
(1)个小伙伴在吐槽
  1. 回复
    他的2017-12-20 17:18 回复