目录结构

引入jQuery：jquery-1.11.1.min.js

html代码

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>摇一摇功能</title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="shake.js"></script>
    <script type="text/javascript">
     var count = 1;
     window.onload = function() { 
    var myShakeEvent = new Shake({ 
        threshold: 15 
    }); 
 
    myShakeEvent.start(); 
 
    window.addEventListener('shake', shakeEventDidOccur, false); 
 
    function shakeEventDidOccur () {
shakingAutoPlay();
$("#shakeMe").text("第"+count+"次摇晃手机");
count++;
window.setTimeout(shakeoverAutoPlay,1500);
    } 
}; 
 
//摇动时的声音
function shakingAutoPlay(){
var shaking = document.getElementById("shaking");//必须使用 document.getElementById 获取dom而非jQuery对象
shaking.loop = false;//必须设置为false   不然在android手机4.0版本上会一直循环播放该音效
shaking.play();
}
 
//摇动结束后的声音
function shakeoverAutoPlay(){
var shakeover = document.getElementById("shakeover");
shakeover.loop = false;
shakeover.play();
}
        
    </script>
</head>
<body>
<div id="pro"> 
    <p>使劲晃动您的手机</p>
    <h1 id="shakeMe">尚未摇动</h1> 
<audio id="shaking" src="shaking.mp3" controls="controls" loop="false" hidden="true"></audio>
<audio id="shakeover" src="shakeover.mp3" controls="controls" loop="false" hidden="true"></audio>
</div>
</body>
</html>

shake.js

/*
 * Author: Alex Gibson
 * https://github.com/alexgibson/shake.js
 * License: MIT license
 */
 
(function(global, factory) {
    if (typeof define === 'function' && define.amd) {
        define(function() {
            return factory(global, global.document);
        });
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = factory(global, global.document);
    } else {
        global.Shake = factory(global, global.document);
    }
} (typeof window !== 'undefined' ? window : this, function (window, document) {
 
    'use strict';
 
    function Shake(options) {
        //feature detect
        this.hasDeviceMotion = 'ondevicemotion' in window;
 
        this.options = {
            threshold: 15, //default velocity threshold for shake to register
            timeout: 1000 //default interval between events
        };
 
        if (typeof options === 'object') {
            for (var i in options) {
                if (options.hasOwnProperty(i)) {
                    this.options[i] = options[i];
                }
            }
        }
 
        //use date to prevent multiple shakes firing
        this.lastTime = new Date();
 
        //accelerometer values
        this.lastX = null;
        this.lastY = null;
        this.lastZ = null;
 
        //create custom event
        if (typeof document.CustomEvent === 'function') {
            this.event = new document.CustomEvent('shake', {
                bubbles: true,
                cancelable: true
            });
        } else if (typeof document.createEvent === 'function') {
            this.event = document.createEvent('Event');
            this.event.initEvent('shake', true, true);
        } else {
            return false;
        }
    }
 
    //reset timer values
    Shake.prototype.reset = function () {
        this.lastTime = new Date();
        this.lastX = null;
        this.lastY = null;
        this.lastZ = null;
    };
 
    //start listening for devicemotion
    Shake.prototype.start = function () {
        this.reset();
        if (this.hasDeviceMotion) {
            window.addEventListener('devicemotion', this, false);
        }
    };
 
    //stop listening for devicemotion
    Shake.prototype.stop = function () {
        if (this.hasDeviceMotion) {
            window.removeEventListener('devicemotion', this, false);
        }
        this.reset();
    };
 
    //calculates if shake did occur
    Shake.prototype.devicemotion = function (e) {
        var current = e.accelerationIncludingGravity;
        var currentTime;
        var timeDifference;
        var deltaX = 0;
        var deltaY = 0;
        var deltaZ = 0;
 
        if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) {
            this.lastX = current.x;
            this.lastY = current.y;
            this.lastZ = current.z;
            return;
        }
 
        deltaX = Math.abs(this.lastX - current.x);
        deltaY = Math.abs(this.lastY - current.y);
        deltaZ = Math.abs(this.lastZ - current.z);
 
        if (((deltaX > this.options.threshold) && (deltaY > this.options.threshold)) || ((deltaX > this.options.threshold) && (deltaZ > this.options.threshold)) || ((deltaY > this.options.threshold) && (deltaZ > this.options.threshold))) {
            //calculate time in milliseconds since last shake registered
            currentTime = new Date();
            timeDifference = currentTime.getTime() - this.lastTime.getTime();
 
            if (timeDifference > this.options.timeout) {
                window.dispatchEvent(this.event);
                this.lastTime = new Date();
            }
        }
 
        this.lastX = current.x;
        this.lastY = current.y;
        this.lastZ = current.z;
 
    };
 
    //event handler
    Shake.prototype.handleEvent = function (e) {
        if (typeof (this[e.type]) === 'function') {
            return this[e.type](e);
        }
    };
 
    return Shake;
}));
 
 demo地址：http://files.cnblogs.com/files/avivaye/shake.zip

[HTML5] 手机摇一摇实现的更多相关文章

  1. 用HTML5实现手机摇一摇的功能(转)

    在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...

  2. Adobe Edge Animate --使用HTML5实现手机摇一摇功能

    Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...

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

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

  4. h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃

    DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...

  5. 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能

      介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装, ...

  6. 手机摇一摇效果-html5

    1.手机摇一摇效果实现 2.播放声音 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

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

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

  8. 利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖

    摇一摇JS脚本逻辑:接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (win ...

  9. html5实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

随机推荐

  1. NFS服务的配置与应用

    一.NFS服务概述 NFS(Network File System),即网络文件系统,是使不同计算机之间能够通过网络进行文件共享的一种网络协议,多用于Linux/Unix网络系统中. 一台NFS服务器 ...

  2. 【转】阻塞与非阻塞socket的优缺点

    转自:http://wenku.baidu.com/link?url=V-TghOmERC0eq0aoXEyhpTw3W5OlqbItwTJE_csI29ysi9vKkCG1lDxq0wWdpImvg ...

  3. spring测试实例

    我们以前要进行单元测试,必须先得到ApplicationContext对象,再通过它得到业务对象,非常麻烦,重复代码也多.基于spring3的单元测试很好的解决了这个问题 基于spring3的单元测试 ...

  4. js正则表达式test方法、exec方法与字符串search方法区别

    1.正则表达式test方法 test() 方法用于检测一个字符串是否匹配某个模式 返回值: 如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 fal ...

  5. How to make a custom WIDGET in OpenERP

    转自:http://sahotaparamjitsingh.blogspot.com/2012/04/how-to-make-custom-widget-in-openerp.html   Hello ...

  6. 【Android】在build/envsetup.sh中添加自己的命令（函数）

    由于测试的需要,经常需要手动刷入boot.img和system.img,把它写到envsetup.sh就可以每次使用一行命令来代替了: function flashtestimage(){ if [[ ...

  7. Overlapped I/O模型深入分析(转)

    随笔 - 262  文章 - 0  评论 - 531  博客园  首页  新随笔  联系  管理  订阅  Overlapped I/O模型深入分析(转) 简述:    Overlapped I/O也 ...

  8. 用string存取二进制数据

    STL的string很强大,用起来也感觉很舒服,这段时间在代码中涉及到了用string存取二进制数据的问题,这里记录一下,以供以后参考. 首先提一下STL中string的参考资料:http://www ...

  9. Codeforces Round #256 (Div. 2) C. Painting Fence (搜索 or DP)

    [题目链接]:click here~~ [题目大意]:题意:你面前有宽度为1,高度给定的连续木板,每次能够刷一横排或一竖列,问你至少须要刷几次. Sample Input Input 5 2 2 1 ...

  10. ubuntu下禁用和恢复触摸板

    1.一般禁用选项在 settings > mouse and touchpad 中.(16.04通过实验)如果无法禁用或者希望恢复,向下看. 2.命令行键入: xinput ,插卡touchpa ...