<script>

 // 首先在页面上要监听运动传感事件
function init(){
  if (window.DeviceMotionEvent) {
    // 移动浏览器支持运动传感事件
    window.addEventListener('devicemotion', deviceMotionHandler, false);
    $("#yaoyiyaoyes").show();
  } else{
    // 移动浏览器不支持运动传感事件
    alert("移动浏览器不支持运动传感事件");
  }
} // 首先,定义一个摇动的阀值
var SHAKE_THRESHOLD = 3000;
// 定义一个变量保存上次更新的时间
var last_update = 0;
// 紧接着定义x、y、z记录三个轴的数据以及上一次出发的时间
var x;
var y;
var z;
var last_x;
var last_y;
var last_z; // 为了增加这个例子的一点无聊趣味性,增加一个计数器
var count = 0; function deviceMotionHandler(eventData) {
  // 获取含重力的加速度
  var acceleration = eventData.accelerationIncludingGravity;   // 获取当前时间
  var curTime = new Date().getTime();
  var diffTime = curTime -last_update;
  // 固定时间段
  if (diffTime > 100) {
    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) {
      // TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作
      count++;
      $("#yaoyiyaoyes").hide();
      $("#yaoyiyaoresult").show();
      $("#yaoyiyaoresult").html("摇你妹!第" + count + "个了!");
    }     last_x = x;
    last_y = y;
    last_z = z;
  }
}
</script>
<div id="yaoyiyaono" style="font-size:20px;margin:10px;line-height:35px;display:none;">
  兄弟,如果您看到了我,说明您现在还不能摇,不是说您没有资格用我,而是:</br>
  1、如果您使用PC机的浏览器,那可就不对了,我只爱手机浏览器;</br>
  2、如果您是Android手机,那不好意思告诉你,android自带的浏览器抛弃了我,您可以用UCWeb、chrome等第三方浏览器;</br>
  3、如果您都不属于以上两种情况,那我只有告诉您:您改换手机啦!!!</br>
</div>
<div id="yaoyiyaoyes" style="font-size:20px;margin:10px;line-height:50px;display:none;">
  兄弟,摇一个吧,说不定有一个清纯的妹子等着你呢!
</div>
<div id="yaoyiyaoresult" style="font-size:20px;margin:10px;line-height:50px;display:none;"></div>
<script>
$(document).ready(function(){
init();
});
</script>

上面的代碼是我在一個博客上看到的  我記錄下來》。。。。

html5 搖一搖的更多相关文章

  1. Cocos2d-x 3.2 学习笔记(十)Joystick 搖杆控件

    最近想做格鬥遊戲,那麼就要有搖杆控件,不想去看別人的代碼就自己寫了個搖杆控件,實現起來很簡單. 話不多說,看代碼: #ifndef __Joystick__ #define __Joystick__ ...

  2. 一个可扩展的弹幕播放器的HTML5实现范例---ABPlayerHTML5

    ABPlayerHTML5 是一个简单易懂的现代弹幕魔法播放器.这个项目意在取代基于 Flash 的 ABPlayer,同时也希望能为新一代的HTML5弹幕播放器打造一个实现范例.这个播放器將用相对通 ...

  3. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  4. 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  5. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  6. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  7. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  8. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  9. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

随机推荐

  1. EditPlus去行号/行标

    正则表达式1: [0-9]          ---------- > 1    2   3 正则表达式1: [0-9]+:       ---------- > 1:  2:  3: 正 ...

  2. python (7)读取整个目录的所有文件夹并存入

    一,提取出来一个文件夹中的所有文件名并存入到txt文件中 import os import sys reload(sys) sys.setdefaultencoding('utf-8') path = ...

  3. sizeof 和 strlen 区别

    Sizeof与Strlen的区别与联系 一.sizeof    sizeof(...)是运算符,在头文件中typedef为unsigned int,其值在编译时即计算好了,参数可以是数组.指针.类型. ...

  4. JAVA break终止循环,与continue进入下一次循环

    一.break终止循环 在循环中,遇到break;将会跳出循环,继续往下执行代码 public class Test{ public static void main(String[] args){ ...

  5. windows下Gulp入门详细教程 &&gulp安装失败的原因(红色)

    以下教程亲自实践可行: 另外添加一个Gulp自动编译.压缩.更新.测试的教程链接:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...

  6. FBI传授9秘诀:如何看穿对方在撒谎 z

    第1招:不提及自身和姓名 美国赫特福德郡大学的心理学家韦斯曼说,〝人们在说谎时会本能地把自己从他们所说的谎言中剔除出去〞.所以如果你向某人提问时,他们总是反覆地省略〝我〞,他们就有被怀疑的理由了.反过 ...

  7. php 防止sql注入

    Q:如果把用户输入的没有任何改动的放到SQL的查询语句中,很有可能会导致SQL注入,比如说下面的例子: $unsafe_variable = $_POST['user_input']; mysql_q ...

  8. 理解perl的编码转换——utf8以及乱码

    工作需要,闲暇之余,仔细研究了一下脚本乱码的问题 1. vim新建的文件 1)在linux命令行 vim命令建立的文件,如果内容中不出现中文,默认是ASCII.那么用notepad++打开的时候,就是 ...

  9. tomcat 内存溢出

    PermGen space的全称是Permanent Generation space,是指内存的永久保存区域,这一部分用于存放Class和Meta的信息,Class在被 Load的时候被放入Perm ...

  10. List<Object>和List<String>

    下面的代码在JAVA中是不可以的: import java.util.*; public class Test { public static void main(String[] args) { L ...