HTML5技术

利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖 - 熊仔其人

字号+ 作者:H5之家 来源:H5之家 2017-01-16 12:00 我要评论( )

摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (window.DeviceMotionEvent) {window.addEventListener( 'devicemotion', ha

摇一摇JS脚本逻辑:
接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下:

if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', handler, !1); lastTime = new Date(); } else { alert('你的浏览器不支持摇一摇功能.'); }

devicemotion事件对象中有一个accelerationIncludingGravity属性,该属性包括:一个包含x、y 和z 属性的对象,在考虑z 轴自然重力加速度的情况下,告诉你在每个方向上的加速度。该API的具体使用大家可以参考网上的资料,非常多,这里就不重复了。 摇一摇的具体逻辑如下:

function handler(e) { var current = e.accelerationIncludingGravity; var currentTime; var timeDifference; var deltaX = 0; var deltaY = 0; var deltaZ = 0; ((lastX === null) && (lastY === null) && (lastZ === null)) { lastX = current.x; lastY = current.y; lastZ = current.z; return; } //得到两次移动各个方向上的加速度绝对差距 deltaX = Math.abs(lastX - current.x); deltaY = Math.abs(lastY - current.y); deltaZ = Math.abs(lastZ - current.z); (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ > threshold))) { currentTime = new Date; timeDifference = currentTime.getTime() - lastTime.getTime(); (timeDifference > timeout) { //触发摇一摇事件 dealShake(); lastTime = new Date; } } lastX = current.x; lastY = current.y; lastZ = current.z; }

 

不考虑各等奖的中奖概率问题

最终完整代码示例:

摇一摇抽奖, , ; ; ; ; (e) { 24 ready(); ); 脚本逻辑: 28 *移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息。 29 *devicemotion事件对象中有一个accelerationIncludingGravity属性,该属性包括:一个包含x、y 和z 属性的对象,在考虑z 轴自然重力加速度的情况下,告诉你在每个方向上的加速度。 ready() { 32 if (window.DeviceMotionEvent) { ); Date(); { ); 37 } 38 } handler(e) { e.accelerationIncludingGravity; 42 var currentTime; 43 var timeDifference; ; ; ; )) { current.x; current.y; current.z; 53 return; 54 } current.x); current.y); current.z); threshold))) { Date; lastTime.getTime(); timeout) { dealShake(); Date; 69 } 70 } current.x; current.y; current.z; 75 } dealShake() { ; ; GetName(); () { ; ; ); 87 88 } GetName() { ]; )]; 93 } 94 function GetRandom(minValue, maxValue) { minValue; 96 }

shake.html

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 读书笔记:《HTML5开发手册》Web表单 - 绿岛之北

    读书笔记:《HTML5开发手册》Web表单 - 绿岛之北

    2017-01-14 15:04

  • HTML5的文档结构 - 不报错才可怕

    HTML5的文档结构 - 不报错才可怕

    2017-01-14 12:00

  • 读书笔记:《HTML5开发手册》--现有元素的变化 - 绿岛之北

    读书笔记:《HTML5开发手册》--现有元素的变化 - 绿岛之北

    2017-01-14 10:02

  • html5后台界面 - verylove

    html5后台界面 - verylove

    2017-01-12 12:00

网友点评