无为清净楼资源网

HTML5使用DeviceOrientation实现摇一摇功能
网络编程 2024/11/20 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

HTML5有一个重要特性：DeviceOrientation，它将底层的方向和运动传感器进行了高级封装，它使我们能够很容易的实现重力感应、指南针等有趣的功能。本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果。

DeviceOrientation包括两个事件：

1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。
2、deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

HTML

页面上有一个div#hand，用来放置一个手摇的图片，div#result用来展示摇动后的结果信息。

<div id="hand" class="hand hand-animate"></div> 
<div id="result"></div>

我们可以使用CSS3来增强页面效果，使用-webkit-animation动画效果实现手摇图片的动态效果，具体请下载源代码查看。

Javascript

“摇一摇”这个动作即“一定时间内设备了一定距离”，因此通过devicemotion监听设备晃动获取到的x, y, z轴的 值在一定时间范围内的变化率，即判断设备是否有进行晃动。而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。
HTML5判断设备晃动的代码我们使用已经封装好的shake.js，项目地址：https://github.com/alexgibson/shake.js。

<script src="/UploadFiles/2021-04-02/shake.js">


首先实例化Shake，然后启动开始监听设备运动情况，监听设备运动，回调监听结果：shakeEventDidOccur。







window.onload = function() { 
  var myShakeEvent = new Shake({ 
    threshold: 15 
  }); 
 
  myShakeEvent.start(); 
 
  window.addEventListener('shake', shakeEventDidOccur, false); 
 
  function shakeEventDidOccur () { 
    var result = document.getElementById("result"); 
    result.className = "result"; 
    var arr = ['妹子一枚','福利图片一套','码农笔记一本','土豪金一台']; 
    var num = Math.floor(Math.random()*4); 
    result.innerHTML = "恭喜，摇得"+arr[num]+"！"; 
    setTimeout(function(){ 
      result.className = "result result-show"; 
    }, 1000); 
  } 
}; 






这里，函数shakeEventDidOccur()可以自定义，本例是将摇晃后的结果返回在页面上展示出来，请看DEMO演示。


以上所述就是本文的全部内容了，希望大家能够喜欢。
标签：
HTML5,DeviceOrientation,摇一摇
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接