一个简单的HTML5摇一摇实例
2024-10-03 02:41:19
<!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>
最新文章
- Java 网络爬虫获取网页源代码原理及实现
- 比较原声socket 、GCDAsyncSocket
- JDBC学习笔记2
- 【bzoj2819】 Nim
- Android IOS WebRTC 音视频开发总结(四八)-- 从商业和技术的角度看视频行业的机会
- Ueditor图片缩放的设置
- fedora之防火墙
- iOS开发——开发技巧&;Git常用命令
- mysql 主从 Got fatal error 1236 from master when reading data from binary log: &#39;Could not find first 错误
- Mvc.JQuery.Datatables
- bootstrap初探2
- mybatis获取插入的语句主键(自增主键)
- [工具配置]requirejs 多页面,多入口js文件打包总结
- [HEOI2016/TJOI2016]排序
- Hibernate(10)_双向n对1(双向1对n)
- mysql系列一、mysql数据库规范
- Type mismatch: cannot convert from javax.servlet.http.Cookie[] to org.apache.tomcat.util.http.parser.Cookie[] 的一种可能
- CentOS 7 修改时区
- solr java demo 基础入门
- FU-A方式分包
热门文章
- 【05】react 之 组件state
- BZOJ 1497: [NOI2006]最大获利
- cookie中存储json
- Python学习杂记_4_分支和循环
- python3 定义向量运算
- Codeforces Gym10081 A.Arcade Game-康托展开、全排列、组合数变成递推的思想
- P1243~P1247 线段树模板题总结
- (入门SpringBoot)SpringBoot后台验证(八)
- 2016北京集训测试赛(十六)Problem B: river
- setTimeout改变this指向(****************************************)