<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/

DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Cache-Control" content="no-cache"/>

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,

 maximum-scale=2.0"/>

<meta name="MobileOptimized" content="240"/>

<title>HTML摇一摇。。。

</title>

<script type="text/javascript">

       var SHAKE_THRESHOLD = 3000;

    var last_update = 0;

    var x=y=z=last_x=last_y=last_z=0;

	var  media; 

	function init(){

	last_update=new Date().getTime();

	media= document.getElementById("musicBox");

	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("shaked");

		}

		last_x = x;

		last_y = y;

		last_z = z;

		}    

    }  

</script>

</head> 

<body onload="init()">

html5手机摇一摇功能，摇一摇试试看

</body> 

</html>

一个简单的HTML5摇一摇实例的更多相关文章

  1. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  2. 一个简单的HTML5 Web Worker 多线程与线程池应用

    笔者最近对项目进行优化,顺带就改了些东西,先把请求方式优化了,使用到了web worker.发现目前还没有太多对web worker实际使用进行介绍使用的文章,大多是一些API类的讲解,除了涉及到一些 ...

  3. 一个简单的html5页面在线速成工具！（当然本文主要说下他的成果的结构）

    分享一个好玩的web app页面速成工具 当然主要是让大家看下他的原理 看着他的结构大家就该猜到这个了.这个是利用换页之后给当前div加了一个active,然后利用css控制效果 这个毫无疑问是采用最 ...

  4. 一个简单的JSP 连接MySQL使用实例

    一.软件环境 下载并安装MySQL,Tomacat,JDBC.MyEclipse或其他IDE. 二.环境配置 将其环境变量配置好之后,下载Java 专用的连接MySQL的驱动包JDBC,有人会发现在一 ...

  5. JQuery中一个简单的表单验证的实例

    html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  6. 最简单的html5语言

    什么是 HTML5? HTML5 是下一代 HTML 标准. 最小的HTML5文档 下面是一个简单的HTML5文档: <</span>!DOCTYPE html><< ...

  7. html5 WebSocket的Js实例教程

    详细解读一个简单+ ,附带完整的javascript websocket实例源码,以及实例代码效果演示页面,并对本实例的核心代码进行了深入解读. 从WebSocket通讯三个阶段(打开握手.数据传递. ...

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

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

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

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

随机推荐

  1. 【04】【转】Nodejs学习笔记（四）--- 与MySQL交互（felixge/node-mysql）

    目录 简介和安装 测试MySQL 认识一下Connection Options MYSQL CURD 插入 更新 查询 删除 Nodejs 调用带out参数的存储过程,并得到out参数返回值 结束数据 ...

  2. Docker：架构分解

    17分钟快速浏览一遍 Docker内部构建 要理解Docker内部构建,需要理解以下三种部件: Docker镜像(Image) Docker容器(Container) Docker仓库(reposit ...

  3. 【HDOJ5972】Regular Number（Bitset，ShiftAnd）

    题意:给你N位数,接下来有N行,第i行先输入n,表示这个数的第i 位上可以在接下来的n个数中挑选,然后i 行再输n个数. 然后输入需要匹配的母串,让你输出母串中有多少个可行的N位子串. n<=1 ...

  4. SQL优化 ASP.NET ADO.NET

    原文发布时间为:2009-08-26 -- 来源于本人的百度文章 [由搬家工具导入] 总的考虑方向 1)        根据数据使用的方式来设计数据访问层 2)        缓存数据，避免不必要的操 ...

  5. div切换 div轮换显示

    原文发布时间为:2009-05-10 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  6. 解决Navicat 报错:1130-host ... is not allowed to connect to this MySql server,MySQL不允许从远程访问的方法

    1. 改表法. 可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更改 "mysql" 数据库里的 " ...

  7. poj 2528 Mayor's posters 线段树 || 并查集 离线处理

    题目链接 题意 用不同颜色的线段覆盖数轴,问最终数轴上有多少种颜色? 注:只有最上面的线段能够被看到:即,如果有一条线段被其他的线段给完全覆盖住,则这个颜色是看不到的. 法一:线段树 按题意按顺序模拟 ...

  8. Syslinux使用

    1. 介绍 Syslinux是一个功能强大的引导加载程序, 可以装在U盘上来引导系统 在5.00版本以前,几乎所有c32模块是独立的,即没有其他模块依赖:但在5.00以后,很多c32模块则是依赖于其他 ...

  9. Codeforces Round #450 (Div. 2) A. Find Extra One【模拟/判断是否能去掉一个点保证剩下的点在Y轴同侧】

    A. Find Extra One time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  10. 莫队浅谈&题目讲解

    莫队浅谈&题目讲解 一.莫队的思想以及莫队的前置知识 莫队是一种离线的算法,他的实现借用了分块的思想.在学习莫队之前,本人建议学习一下分块,并对其有一定的理解. 二.莫队 现给出一道例题:bz ...