html5 搖一搖
<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 搖一搖的更多相关文章
- Cocos2d-x 3.2 学习笔记(十)Joystick 搖杆控件
最近想做格鬥遊戲,那麼就要有搖杆控件,不想去看別人的代碼就自己寫了個搖杆控件,實現起來很簡單. 話不多說,看代碼: #ifndef __Joystick__ #define __Joystick__ ...
- 一个可扩展的弹幕播放器的HTML5实现范例---ABPlayerHTML5
ABPlayerHTML5 是一个简单易懂的现代弹幕魔法播放器.这个项目意在取代基于 Flash 的 ABPlayer,同时也希望能为新一代的HTML5弹幕播放器打造一个实现范例.这个播放器將用相对通 ...
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
- 读书笔记:《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
- 戏说HTML5
如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...
- nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
随机推荐
- C# 多线程网络通信
博客园 :梦工厂2012 本月由于事情太多,没能有太多的时间去写博客.不过还好在月底抽时间写了这个多线程网络通信的程序 .程序说明:控制端 创建一个写线程threadWrite和一个读线程thread ...
- BarTender破解问题
要使用BarTender 10.0的.net组件打印条码,就必须使用企业版的.在破解说明中会指出,BarTender破解过程要断开internet连接.在企业应用开发中,可能会遇到在局域网中给多个机器 ...
- 使用SVN进行项目版本管理
1.摘要 本文描述了利用SVN进行项目版本管理的方法,涉及项目版本号命名规则.SVN目录结构.第三方代码库的管理.版本创建.发布.修订.合并等行为的方法和原则. 2.版本号命名规则 版本号采用主版本号 ...
- KS-检验(Kolmogorov-Smirnov test) -- 检验数据是否符合某种分布
Kolmogorov-Smirnov是比较一个频率分布f(x)与理论分布g(x)或者两个观测值分布的检验方法.其原假设H0:两个数据分布一致或者数据符合理论分布.D=max| f(x)- g(x)|, ...
- 解决CI框架的Disallowed Key Characters错误提示
用CI框架时,有时候会遇到这么一个问题,打开网页,只显示 Disallowed Key Characters 错误提示.有人说 url 里有非法字符.但是确定 url 是纯英文的,问题还是出来了.但清 ...
- Tesseract-OCR 字符识别---样本训练
Tesseract是一个开源的OCR(Optical Character Recognition,光学字符识别)引擎,可以识别多种格式的图像文件并将其转换成文本,目前已支持60多种语言(包括中文). ...
- [Java] 字符流 Writer,输出字符数据PrintWriter
package test.stream; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.Fi ...
- Python中为什么推荐使用isinstance来进行类型判断?而不是type
转自:http://www.xinxingzhao.com/blog/2016/05/23/python-type-vs-isinstance.html Python在定义变量的时候不用指明具体的的类 ...
- POJ 3311 【状态压缩DP】
题意: 给n个点,给出矩阵代表i到j单向边的距离. 要求,不介意访问每个点的次数,要求访问完每个点,使得路程总和最小. 思路: 由于不介意访问每个点的次数,所以可以先进行FLOYD求出任意两个点之间的 ...
- cocos2dx跨平台使用自定义字体
首先需要一个ttf文件的字体. 在ios中的方法: 把ttf文件放入资源文件下,然后在你的工程的Info.plist文件中新建一行(Add Row),添加key为:Fonts provided by ...