码迷,mamicode.com
首页 > Web开发 > 详细

一个简单的HTML5摇一摇实例

时间:2017-07-24 14:51:15      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:data   public   clu   mob   code   one   box   _id   char   

<!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摇一摇实例

标签:data   public   clu   mob   code   one   box   _id   char   

原文地址:http://www.cnblogs.com/yangykaifa/p/7228509.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!