首页 > 网站 > WEB开发 > 正文

Javascript网页摇一摇

2024-04-27 14:10:02
字体:
来源:转载
供稿:网友

javascript网页摇一摇

 function init(){  if (window.DeviceMotionEvent) {    // 移动浏览器支持运动传感事件    window.addEventListener('devicemotion', deviceMotionHandler, false);  } }var SHAKE_THRESHOLD = 3000;// 定义一个变量保存上次更新的时间var last_update = 0;// 紧接着定义x、y、z记录三个轴的数据以及上一次出发的时间var x;var y;var z;var last_x;var last_y;var last_z;var count = 0;function deviceMotionHandler(eventData) {  // 获取含重力的加速度  var acceleration = eventData.accelerationIncludingGravity;   // 获取当前时间  var curTime = new Date().getTime();   var diffTime = curTime -last_update;  // 固定时间段  if (diffTime > 100) {    last_update = curTime;     x = acceleration.x;     y = acceleration.y;     z = acceleration.z;     var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 30000;     if (speed > SHAKE_THRESHOLD) {       // 在此处可以实现摇一摇之后所要进行的数据逻辑操作    }      //记录上一次加速度    last_x = x;     last_y = y;     last_z = z;   } } 

HTML5晃动DeviceMotionEvent事件

现在很多的手机页面上也有摇一摇功能了,比如什么领取红包,还有那种死命摇摇到100%弹出个什么东西来着,在坑爹点的摇个女票-_-//

deviceMotionHandler://运动传感器处理

last_update=curTime;//记录上一次摇动的时间x=acceleration.x;//获取加速度X方向y=acceleration.y;//获取加速度Y方向z=acceleration.z;//获取加速度垂直方向

if (speed > SHAKE_THRESHOLD) {       // 在此处可以实现摇一摇之后所要进行的数据逻辑操作

}

然后再这里你可以做你想做的操作了

比如弹个框(你啥都没中到)

再比如来个

X++然后摇啊摇摇到100弹个什么

最后你可以在页面调用就可以了

<script>$(document).ready(function(){init();});</script>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表