摇一摇js 实现

if (window.DeviceMotionEvent) {
window.addEventListener(‘devicemotion‘,deviceMotionHandler, false);
}

var SHAKE_THRESHOLD = 800;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;

function deviceMotionHandler(eventData) {

var acceleration =eventData.accelerationIncludingGravity;
//alert(newDate().getTime());
var curTime = new Date().getTime();

// alert(curTime - last_update);
if ((curTime - last_update)> 300) {

var diffTime = curTime -last_update;
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 * 10000;

if (speed > SHAKE_THRESHOLD) {
alert("shaked!");
}
last_x = x;
last_y = y;
last_z = z;
}
}

时间: 2024-10-10 13:59:53

摇一摇js 实现的相关文章

使用shake.js让你博客支持摇一摇

大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧.该功能已经集成在Oconnor1.8中.本文主要讲解这货的原理. 首先需要下载shake.js,shake.js github地址,我们只需要里面的shake.js,然后引入. 添加“摇一摇”事件监听 window.addEventListener('shake', shakeEventDidOccur, false); //function to call when shake oc

shake.js实现微信摇一摇功能

项目要求实现点击摇一摇图片,图片摇一摇,并且摇一摇手机,图片也要摇一摇. 关于用js怎样实现摇一摇手机图片摇一摇,我在网络上找了一些方法,真正有用的是shake.js. 接下来,上shake.js源码: /* * Author: Alex Gibson * https://github.com/alexgibson/shake.js * License: MIT license */ (function(global, factory) { if (typeof define === 'func

js html5 仿微信摇一摇

看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p>用力摇一摇你手机</p> <audio style="display:hiden;width:0px; height:0px;" id="musicBox" preload="metadata" controls src=&q

js检测手机摇一摇

1.检测设备是否支持重力感应事件deviceorientation deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角 function motionHandler(event) { accGravity = event.acceleration; } if (window.DeviceMotionEvent) { window.addEventListener("devicemotion", motionHandler, false); } el

用js实现摇一摇功能

function init(){ if (window.DeviceMotionEvent) { // 移动浏览器支持运动传感事件 window.addEventListener('devicemotion', deviceMotionHandler, false); } } var SHAKE_THRESHOLD = 3000; // 定义一个变量保存上次更新的时间 var last_update = 0; // 紧接着定义x.y.z记录三个轴的数据以及上一次出发的时间 var x; var

js实现手机摇一摇

//手机摇一摇 ---------------------------------------------------------- init();var SHAKE_THRESHOLD = 3000;        var last_update = 0;        var x = y = z = last_x = last_y = last_z = 0;        function init() {            if (window.DeviceMotionEvent) {

微信摇一摇红包

 功能介绍  2015年9月份左右微信摇一摇周边开放了"摇一摇红包组件接口",具备开发能力的用户,可以调用该接口进行功能开发.摇一摇红包功能通过简便的操作方式减少用户的操作层级.优化了用户的互动体验,并且趣味性地留存了用户和促进了品牌推广,参与活动的用户仅需在ibeacon设备蓝牙广播范围内打开手机蓝牙,进入微信摇一摇,等待出现"周边"入口,即可摇到现金红包,用户点击拆开红包,直接转入微信零钱包并且默认用户关注了公众号.  用户领取红包流程  现在,跟着一起,来体验

微信企业号开发:微信考勤摇一摇考勤

看到网上又不好微信企业号的摇一摇考勤,自己也想做一个,但查遍了微信企业号文档,也没有看到摇一摇的相关API,本以为做不出来了,想不到再问了同事后,才知道其实很简单,摇一摇不需要微信企业号的文档,HTML5就有,摇一摇其实就是相当于点击了保存按钮而已. 其实获取地理位置HTML5也支持. HTML5 - 使用地理定位 <script> var x=document.getElementById("demo"); function getLocation() { if (nav

微信摇一摇羊年运势签实现?

在看其他公众号关于摇一摇实现代码前,大概猜想先建立一批各种运势的图文页面,然后通过摇一摇产生随机数字,并跳转到对应页面. 跟友人开玩笑,就弄一根上上签,怎么摇都是这个结果,皆大欢喜. 言归正传,先看看实现效果:http://www.avalonits.cn/wechat_rand/index.html 微信打开该页面,即可实现摇一摇. 当然,各微信公众号运营商都希望跳转到自己的页面,那么只要更改nvshengu.js中相应代码即可: jumpToDecode = function(){ ? 1

微信日志现实摇一摇抽签

这一节我们简单介绍一下在微信日志中实现摇一摇抽签功能的实现. 摇一摇抽签的实现主要是借助JS进行页面跳转实现的. 抽签的签文可以在自己的微信公众号中事先写好,然后将URL记录下来,在JS跳转中导入便可以实现. 逻辑图如下: ?点击链接跳转到主界面(index.html) ?摇一摇手机(点击手机)跳转到抽签JS(index.js) ?随机结果选择微信公众号中已写好的文章 主界面的实现简单代码如下(index.html): <div class="do">摇一摇手机</d