<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="format-detection"content="telephone=no">
<title>html5重力感应事件</title>
</head>
<body>
<p>摇一摇去触发html5重力感应事件</p>
<div id="j"></div>
<script type="text/javascript">
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
var speed = 1;//速度
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
//document.getElementById("j").innerHTML = "\n "+Math.abs(x-lastX)+"\n"+Math.abs(y-lastY)+"\n"+Math.abs(z-lastZ);
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
//简单的摇一摇触发代码
//alert('触发了重力感应');
document.getElementById("j").innerHTML = "\n "+Math.abs(x-lastX);
}
lastX = x;
lastY = y;
lastZ = z;
}
</script>
</body>
</html>
参考：
http://www.haorooms.com/post/html5_DeviceMotionEvent
相关推荐
<li> <a > <i class="fa fa-home"></i> <strong>Home</strong> <small>sweet home</small> </a> </li> <li> <a > <i class="fa fa-edit"></i> <strong>About us</strong> <small>sweet home</small> </a> </li> ...
<param-value>token,Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value> --> <param-value>Access-Control...
<body>[removed][removed] <div class="contain-clock"> <div class="face-1"> <div class="hour"></div> ... 这是一款个性无图片纯CSS3代码制作的CSS3卡通闹钟摇晃动画特效，非常的有趣。
代码片段： <div class="box box1"> ...<h5>Hello</h5> </div> <p>66.6%</p> </div> <div class="box box2"> <div class="name"> <h4>Tap here</h4> <h5>Hi</h5> </div> <p>62.3%</p> </div>
马上要年会了，有个什么总突然过来找我们部门后端负责人（我们公司后端用的PHP），询问是否能做...年会摇一摇H5小游戏完整demo，有截图，可先去看看截图 https://blog.csdn.net/qq_38652871/article/details/103424198
基于 vue3 + vite + （nutui or varlet or vant） + sass + viewport 适配方案 +axios 封装，构建手机端模板脚手架 Node 版本要求 推荐你使用 NodeJs 14+的版本，毕竟技术日新月异。你可以使用 nvm 或 nvm-windows ...
H5支付，扫码支付，app支付，公众号支付！封装好 - 在默认配置情况下，将文件夹**拷贝到根目录**即可, 其中<code>extend</code>目录为扩展目录 - 需要在配置文件<code>extend/wxpay/lib/WxPayConfig.php</code>中...
<div class="Head-top u-bg"></div> <div class="Head-front u-bg"></div> <div class="Head-left u-bg"></div> <div class="Head-right u-bg"></div> <div class="Head-back u-bg"></div> ...
代码片段： <div id="table"> ... <div id="line"></div> <div id="net-top"></div> <div id="net-middle"></div> <div id="net-bottom"></div> <div id="net-shadow"></div> </div>
<li data-id="2"> <span>手机 /数码 /电脑办公</span></li> <li data-id="3"> <span>零食 /茶酒 /进口食品 </span></li> <li data-id="4"> <span>母婴玩具 </span></li> <li data-id="5"> <span>腕表 /眼镜 /珠宝...
<hr/> <!-- 2. 段落标签--> <p>枫桥夜泊</p> <p>月落乌啼霜满天,</p> <p>江枫渔火对愁眠。</p> <p>姑苏城外寒山寺,</p> <p>夜半钟声到客船。</p> </body> <pre> 月落乌啼霜满天, 江枫渔火对愁眠。 姑苏...
魏金梁" /> 魏金梁" /> <meta content="nightjass" name="keywords" /> <title>nightjass 魏金梁</title> <style type="text/css"> body {background: #fff;font-family: "Lucida Grande", Helvetica, Arial, sans-...
<div class="i-face i-front">Gallery<div class="arrow-hover"></div></div> <div class="i-face i-right"></div> <div class="i-face i-left"></div> <div class="i-face i-top"></div> ...
<h5>Hello</h5> </div> <p>66.6%</p> </div> <div class="box box2"> <div class="name"> <h4>Tap here</h4> <h5>Hi</h5> </div> <p>62.3%</p> </div> <div class="box box3"> <div class="name"> ...
士研电机计数器H5C-2/H5C-3/H5C-4说明书pdf,士研电机计数器H5C-2/H5C-3/H5C-4说明书：具有2位数，3位数及4位数计数功能，7段LED数字显示，使用接点输入，亦可外接使用近接开关或光电开关输入，复归方式可用断电复归...
<img src="pic/system_arch.png" width = "250" height = "300" alt="system_arch" align=center /> ## 构建环境 ### Docker-Compose ```shell # 启动 make up # 开发运行 make dev # 关闭 make down ``` ### ...
vue-h5-模板 基于vue-cli4.0 + webpack 4 + vant ui + sass + rem适应方案+ axios封装，内置手机端模板脚手架 掘金： 建议手机端查看 节点版本要求 Vue CLI需要Node.js 8.9或更高版本（推荐8.11.0+）。您可以使用或...
<div class="bg-product-pic server-header-01"></div> </div> <h2 class="product-introduce-title">云服务器</h2> <p class="product-introduce-content">极速稳定高弹性的计算服务</p> <div class="product-...
<h1 class='dilate'>Dilate</h1> <h1 class='erode'>Erode</h1> <h1 class='distant1'>Distant Light</h1> <h1 class='distant-top'>Distant Top</h1> <h1 class='distant-front'>Distant Front</h1> ...
本教程将围绕"手机端H5_swiper_动画.zip"这一主题，讲解如何利用Swiper库在H5页面中实现流畅的动画效果，以创建类似易企秀的互动体验。 Swiper是一款强大的触摸滑动插件，特别适合于移动设备上的H5页面开发。它支持...