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>

Javascript网页摇一摇相关推荐

微信摇一摇效果HTML,JavaScript+H5实现微信摇一摇功能
项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动.也一直在做微信公众号的东西,但是要调用微信摇一摇的接口还是有些困难,因为只提供了摇一摇周边,附近的人以及一系列的红包页面,相对 ...
浅谈扫描二维码登录微信网页版与摇一摇传图的实现原理
前言:简单体验了下微信网页版通过二维码登录和摇一摇传图功能,从技术角度看,网上专家吹捧的 [隔空取物]其实并不神秘,我先简单分析一下. 1. 微信移动端扫描二维码登录(C-S-C模式) CSC模式为: ...
手机网页设置摇一摇效果
一朋友让我搞一个摇一摇抽奖的活动.只需要微信扫码进入那个网页就可以了. 原文链接在:原文链接 <!DOCTYPE html> <html lang="en"> ...
微信摇一摇周边红包
早上老大扔了个设备来说要做个摇一摇红包就上网找了下强大的度娘都找不到大神们分享出来的源码只能自己埋头去写写了微信官方说明如下摇一摇红包说明功能说明摇一摇周边红包接口是为线下商户提供的发 ...
手机摇一摇效果-html5
1.手机摇一摇效果实现 2.播放声音 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
H5进阶篇--实现微信摇一摇功能
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖
摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (wi ...
html5微信摇一摇api,摇一摇关注JSAPI
出自微信公众平台开发者文档跳转到: 导航, 搜索摇一摇关注JS API 摇一摇关注JS API目的是为已开通微信摇一摇周边,且有一定开发能力的商户提供摇一摇关注能力.商户可以在摇出来的页面直接调用 ...
H5实现微信摇一摇功能
//摇一摇 <script type="text/javascript"> var num =1; var SHAKE_THRESHOLD = 2000; var la ...

Javascript网页摇一摇

Javascript网页摇一摇相关推荐

最新文章

热门文章