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) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('not support mobile event');
}
}
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update) > 100) {
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("摇动了");
media.setAttribute("src", "http://211.148.5.228:8002/Pages/test/Kalimba.mp3");
media.load();
media.play();
}
last_x = x;
last_y = y;
last_z = z;
}
}
js实现手机摇一摇的更多相关文章
- H5+JS实现手机摇一摇功能
在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备 ...
- js检测手机摇一摇
1.检测设备是否支持重力感应事件deviceorientation deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角 function motionHandle ...
- 通过手机Web实现手机摇一摇的功能
经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能.现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是DeviceOrientation:官方文档 ...
- html5 DeviceOrientation来实现手机网站上的摇一摇功能
原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的 幸福2胖纸的码农生活,直接转载了,不要介意!呵呵 以下是转载内容 ...
- 使用shake.js让你博客支持摇一摇
大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧.该功能已经集成在Oconnor1.8中.本文主要讲解这货的原理. 首先需要下载shake ...
- 【HTML5 】手机重力与方向感应的应用——摇一摇效果
http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们 ...
- [HTML5] 手机摇一摇实现
目录结构 引入jQuery:jquery-1.11.1.min.js html代码 <!DOCTYPE html> <html lang="en"> < ...
- js微信摇一摇功能以及api
一.摇一摇功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- shake.js实现微信摇一摇功能
项目要求实现点击摇一摇图片,图片摇一摇,并且摇一摇手机,图片也要摇一摇. 关于用js怎样实现摇一摇手机图片摇一摇,我在网络上找了一些方法,真正有用的是shake.js. 接下来,上shake.js源码 ...
随机推荐
- IPsec ISAKMP(转)
IPsec ISAKMP 2010-08-10 11:47:01 标签:IPsec 职场 休闲 ISAKMP Interne 安全连接和密钥管理协议(ISAKMP)是 IPsec 体系结构中的一种主要 ...
- HDU 1896 Stones (优先队列)
Stones Time Limit: 5000/3000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total Subm ...
- 【Linux】进程优先级、进程nice值和%nice
用top或者ps命令会输出PRI/PR.NI.%ni/%nice这三种指标值,这些到底是什么东西?先给出大概的解释如下: PRI :进程优先权,代表这个进程可被执行的优先级,其值越小,优先级就越高,越 ...
- Spring-Boot原理及应用布署
一.Spring Boot的理念 从最根本上来讲,Spring Boot就是一些库的集合,它能够被任意项目的构建系统所使用.简便起见,该框架也提供了命令行界面,它可以用来运行和测试Boot应用.框架的 ...
- background-size ie8不支持怎么解决
background-size这个属性是css3,新增的属性,现在很多浏览器已经支持了,但是IE系列的浏览器却没有支持,比如IE8,下面介绍下如何解决这个问题 在IE浏览器中,可以通过滤镜filter ...
- Linux中断的系统调用
早期UNIX系统的一个特性是:如果在进程执行一个低速系统调用而阻塞期间捕捉到一个信号,则该系统调用就被中断不再继续执行.该系统调用返回出错,其errno设置为EINTR.这样处理的理由是:因为一个信号 ...
- 跟我学SharePoint 2013视频培训课程——网站导航及页面元素(2)
课程简介 第2天,介绍SharePoint 2013 网站导航及页面元素 视频 SharePoint 2013 交流群 41032413
- centos中添加php扩展pdo_mysql步骤
本文内容是以 CentOS 为例,红帽系列的 Linux 方法应该都是如此,下面就详细说明步骤,在这里严重鄙视哪些内容??隆⑺档脑悠咴影说挠泄 PDO 编译安装的文章. 1.进入 PHP 的软件包 p ...
- systemctl 命令
systemctl命令是系统服务管理器指令,它实际上将 service 和 chkconfig 这两个命令组合到一起. 任务 旧指令 新指令 使某服务自动启动 chkconfig --level 3 ...
- T4文本模板转换过程
T4文本模板转换过程将文本模板文件作为输入,生成一个新的文本文件作为输出. 例如,可以使用文本模板生成 Visual Basic 或 C# 代码,还可以生成 HTML 报告. 有三个组件参与这一过程: ...