//手机摇一摇 ----------------------------------------------------------

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实现手机摇一摇的更多相关文章

  1. H5+JS实现手机摇一摇功能

    在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备 ...

  2. js检测手机摇一摇

    1.检测设备是否支持重力感应事件deviceorientation deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角 function motionHandle ...

  3. 通过手机Web实现手机摇一摇的功能

    经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能.现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是DeviceOrientation:官方文档 ...

  4. html5 DeviceOrientation来实现手机网站上的摇一摇功能

    原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的 幸福2胖纸的码农生活,直接转载了,不要介意!呵呵 以下是转载内容 ...

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

    大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧.该功能已经集成在Oconnor1.8中.本文主要讲解这货的原理. 首先需要下载shake ...

  6. 【HTML5 】手机重力与方向感应的应用——摇一摇效果

    http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们 ...

  7. [HTML5] 手机摇一摇实现

    目录结构 引入jQuery:jquery-1.11.1.min.js html代码 <!DOCTYPE html> <html lang="en"> < ...

  8. js微信摇一摇功能以及api

    一.摇一摇功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

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

    项目要求实现点击摇一摇图片,图片摇一摇,并且摇一摇手机,图片也要摇一摇. 关于用js怎样实现摇一摇手机图片摇一摇,我在网络上找了一些方法,真正有用的是shake.js. 接下来,上shake.js源码 ...

随机推荐

  1. Android开发环境内容汇总

     Android开发环境将分为SDK相关内容.Eclipse ADT相关内容.模拟器AVD相关内容.调试器DDMS相关内容.日志LogCat相关内容.连接驱动ADB相关内容.内存泄露检测工具MAT相关 ...

  2. NSObject协议中方法:description 和 debugDescription

    description基本概念 1.NSLog(@"%@", objectA);这会自动调用objectA的description方法来输出ObjectA的描述信息. 2.desc ...

  3. Nginx 和 PHP 的两种部署方式比较

    2种部署方式简介 第一种 前置1台nginx服务器做HTTP反向代理和负载均衡 后面多态服务器部署Nginx Web服务和php-fpm提供的fast cgi服务 第二种 前置1台nginx服务器做W ...

  4. MongoDB学习笔记(5)--document

    MongoDB 插入文档 本章节中我们将向大家介绍如何将数据插入到MongoDB的集合中. 文档的数据结构和JSON基本一样. 所有存储在集合中的数据都是BSON格式. BSON是一种类json的一种 ...

  5. Android View之布局加载流程

    1.引言 最近准备重新学习下Android,加深理解,快速形成自己的知识结构体系.最先学习的就算View部分,从自定义View到Activty层次结构,到layout加载过程.等等都会看一遍,在此记录 ...

  6. Redis命令汇总

    设置服务后台启动 cd /usr/local/redisview redis.conf 将daemonize no改为 daemonize yes保存退出 启动:./reids-server redi ...

  7. Android RGB颜色查询对照表

    因为兼容性问题,色阶板功能只能在IE浏览器中运行 RGB颜色对照表   #FFFFFF   #FFFFF0   #FFFFE0   #FFFF00   #FFFAFA   #FFFAF0   #FFF ...

  8. VB高效导入Excel2003和Excel2007文件到MSHFlexGrid控件显示

    1.VB高效导入Excel2003和Excel2007文件到MSHFlexGrid控件显示 2.以前也有Excel导入通用功能,但速度有些慢一会把两种实现方式都提供出为参考对比. 一.原通用导入exc ...

  9. Centos 二进制安装node.js

    一.登录node的官网查看最新的稳定版,以及需要下载的Linux版本,你可以有多种Linux安装方式(源码安装,二进制安装等). 二.Node安装及配置 1.创建安装目录:创建目录node.js [r ...

  10. Java:集合,对列表(List)中的自定义对象按属性(字段)排序(正序、倒序)的方法

    1. 要求 对列表(List)中的自定义对象,要求能够按照对象的属性(字段)进行排序(正序.倒序). 如:用户对象(Member)有用户名(username).级别(level).出生日期(birth ...