`

h5 -> 手机重力感应/摇一摇

 
阅读更多

 

 

<!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

 

 

 

分享到:
评论

相关推荐

    H5 jQuery CSS3带时钟幻灯片自动轮播特效.zip

    &lt;li&gt; &lt;a &gt; &lt;i class="fa fa-home"&gt;&lt;/i&gt; &lt;strong&gt;Home&lt;/strong&gt; &lt;small&gt;sweet home&lt;/small&gt; &lt;/a&gt; &lt;/li&gt;  &lt;li&gt; &lt;a &gt; &lt;i class="fa fa-edit"&gt;&lt;/i&gt; &lt;strong&gt;About us&lt;/strong&gt; &lt;small&gt;sweet home&lt;/small&gt; &lt;/a&gt; &lt;/li&gt; ...

    tomcat解决跨域访问问题配置

    &lt;param-value&gt;token,Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers&lt;/param-value&gt; --&gt; &lt;param-value&gt;Access-Control...

    vue-h5-template

    基于 vue3 + vite + (nutui or varlet or vant) + sass + viewport 适配方案 +axios 封装,构建手机端模板脚手架 Node 版本要求 推荐你使用 NodeJs 14+的版本,毕竟技术日新月异。你可以使用 nvm 或 nvm-windows ...

    H5 CSS3闹钟动画特效.zip

    &lt;body&gt;[removed][removed] &lt;div class="contain-clock"&gt; &lt;div class="face-1"&gt; &lt;div class="hour"&gt;&lt;/div&gt; ... 这是一款个性无图片纯CSS3代码制作的CSS3卡通闹钟摇晃动画特效,非常的有趣。

    H5 CSS3彩色手风琴菜单代码.zip

    代码片段: &lt;div class="box box1"&gt; ...&lt;h5&gt;Hello&lt;/h5&gt; &lt;/div&gt; &lt;p&gt;66.6%&lt;/p&gt; &lt;/div&gt; &lt;div class="box box2"&gt; &lt;div class="name"&gt; &lt;h4&gt;Tap here&lt;/h4&gt; &lt;h5&gt;Hi&lt;/h5&gt; &lt;/div&gt; &lt;p&gt;62.3%&lt;/p&gt; &lt;/div&gt;

    nodejs+express+socket.io+excel-export实现年会HTML5/H5摇一摇小游戏比赛完整demo/例子及导出excel获奖名单

    马上要年会了,有个什么总突然过来找我们部门后端负责人(我们公司后端用的PHP),询问是否能做...年会摇一摇H5小游戏完整demo,有截图,可先去看看截图 https://blog.csdn.net/qq_38652871/article/details/103424198

    thinkphp5.0 微信支付集成!H5支付,扫码支付,app支付

    H5支付,扫码支付,app支付,公众号支付!封装好 - 在默认配置情况下,将文件夹**拷贝到根目录**即可, 其中&lt;code&gt;extend&lt;/code&gt;目录为扩展目录 - 需要在配置文件&lt;code&gt;extend/wxpay/lib/WxPayConfig.php&lt;/code&gt;中...

    HTML5 3D木头人行走特效.zip

     &lt;div class="Head-top u-bg"&gt;&lt;/div&gt;  &lt;div class="Head-front u-bg"&gt;&lt;/div&gt;  &lt;div class="Head-left u-bg"&gt;&lt;/div&gt;  &lt;div class="Head-right u-bg"&gt;&lt;/div&gt;  &lt;div class="Head-back u-bg"&gt;&lt;/div&gt;  ...

    css3 H5打乒乓球动画特效.zip

    代码片段:  &lt;div id="table"&gt; ... &lt;div id="line"&gt;&lt;/div&gt;   &lt;div id="net-top"&gt;&lt;/div&gt;  &lt;div id="net-middle"&gt;&lt;/div&gt;  &lt;div id="net-bottom"&gt;&lt;/div&gt;  &lt;div id="net-shadow"&gt;&lt;/div&gt;  &lt;/div&gt;

    H5 jQuery商品分类导航菜单切换代码.zip

    &lt;li data-id="2"&gt; &lt;span&gt;手机 /数码 /电脑办公&lt;/span&gt;&lt;/li&gt; &lt;li data-id="3"&gt; &lt;span&gt;零食 /茶酒 /进口食品 &lt;/span&gt;&lt;/li&gt; &lt;li data-id="4"&gt; &lt;span&gt;母婴玩具 &lt;/span&gt;&lt;/li&gt; &lt;li data-id="5"&gt; &lt;span&gt;腕表 /眼镜 /珠宝...

    HTML初步学习,笔记记录

    &lt;hr/&gt; &lt;!-- 2. 段落标签--&gt; &lt;p&gt;枫桥夜泊&lt;/p&gt; &lt;p&gt;月落乌啼霜满天,&lt;/p&gt; &lt;p&gt;江枫渔火对愁眠。&lt;/p&gt; &lt;p&gt;姑苏城外寒山寺,&lt;/p&gt; &lt;p&gt;夜半钟声到客船。&lt;/p&gt; &lt;/body&gt; &lt;pre&gt; 月落乌啼霜满天, 江枫渔火对愁眠。 姑苏...

    雅虎TAB效果代码 Javascript实现

    魏金梁" /&gt; 魏金梁" /&gt; &lt;meta content="nightjass" name="keywords" /&gt; &lt;title&gt;nightjass 魏金梁&lt;/title&gt; &lt;style type="text/css"&gt; body {background: #fff;font-family: "Lucida Grande", Helvetica, Arial, sans-...

    CSS3 H5 3D立体凸出显示导航菜单插件.zip

     &lt;div class="i-face i-front"&gt;Gallery&lt;div class="arrow-hover"&gt;&lt;/div&gt;&lt;/div&gt;  &lt;div class="i-face i-right"&gt;&lt;/div&gt;  &lt;div class="i-face i-left"&gt;&lt;/div&gt;  &lt;div class="i-face i-top"&gt;&lt;/div&gt;  ...

    CSS3的动画手风琴菜单代码.zip

    &lt;h5&gt;Hello&lt;/h5&gt; &lt;/div&gt; &lt;p&gt;66.6%&lt;/p&gt; &lt;/div&gt; &lt;div class="box box2"&gt; &lt;div class="name"&gt; &lt;h4&gt;Tap here&lt;/h4&gt; &lt;h5&gt;Hi&lt;/h5&gt; &lt;/div&gt; &lt;p&gt;62.3%&lt;/p&gt; &lt;/div&gt; &lt;div class="box box3"&gt; &lt;div class="name"&gt; ...

    士研电机计数器H5C-2/H5C-3/H5C-4说明书.pdf

    士研电机计数器H5C-2/H5C-3/H5C-4说明书pdf,士研电机计数器H5C-2/H5C-3/H5C-4说明书:具有2位数,3位数及4位数计数功能,7段LED数字显示,使用接点输入,亦可外接使用近接开关或光电开关输入,复归方式可用断电复归...

    图片向量检索服务系统-基于VGG图像特征提取模型+Faiss+ES+Milvus多种计算引擎实现源码+使用说明.zip

    &lt;img src="pic/system_arch.png" width = "250" height = "300" alt="system_arch" align=center /&gt; ## 构建环境 ### Docker-Compose ```shell # 启动 make up # 开发运行 make dev # 关闭 make down ``` ### ...

    vue-h5-template:vue搭建移动端开发,基于vue-cli4.0 + webpack 4 + vant ui + sass + rem适应方案+ axios封装,内置手机端模板脚手架

    vue-h5-模板 基于vue-cli4.0 + webpack 4 + vant ui + sass + rem适应方案+ axios封装,内置手机端模板脚手架 掘金: 建议手机端查看 节点版本要求 Vue CLI需要Node.js 8.9或更高版本(推荐8.11.0+)。您可以使用或...

    jQuery H5鼠标悬停手风琴滑动切换特效.zip

    &lt;div class="bg-product-pic server-header-01"&gt;&lt;/div&gt; &lt;/div&gt; &lt;h2 class="product-introduce-title"&gt;云服务器&lt;/h2&gt; &lt;p class="product-introduce-content"&gt;极速稳定高弹性的计算服务&lt;/p&gt; &lt;div class="product-...

    H5 jQuery响应式全屏背景图片导航菜单特效.zip

    &lt;h1 class='dilate'&gt;Dilate&lt;/h1&gt; &lt;h1 class='erode'&gt;Erode&lt;/h1&gt; &lt;h1 class='distant1'&gt;Distant Light&lt;/h1&gt; &lt;h1 class='distant-top'&gt;Distant Top&lt;/h1&gt; &lt;h1 class='distant-front'&gt;Distant Front&lt;/h1&gt; ...

    中国移动光猫吉比特H5-9获取超级管理员权限教程

    本文将详细介绍如何在中国移动吉比特H5-9光猫上获取并操作超级管理员权限。这个过程涉及网络设备的后台管理,包括使用特定的URL登录、启用telnet服务以及通过命令行修改配置。首先,确保你具备一定的网络基础和对...

Global site tag (gtag.js) - Google Analytics