JS实现微信摇一摇原理解析


Posted in Javascript onJuly 22, 2017

本文为大家分享了JS实现微信摇一摇的原理,供大家参考,具体内容如下

实现原理:

1.微信摇一摇事件需要有硬件支撑,必须要求手机中有陀螺仪
2.在JS中给window添加ondevectionmotion事件。该事件在手机晃动,即手机中的陀螺仪发生旋转,该事件会触发
3.触发ondevectionmotion事件,会产生一个事件对象,通过该对象中的键值(accelerationIncludingGravity)来获得该重力加速器对象
4.重力加速器对象中含有陀螺仪的坐标,通过重力加速器对象.x - .y - .z 获取陀螺仪当前的坐标

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
  <title>微信摇一摇</title> 
 </head> 
 <body> 
  <!--请摇一摇--> 
 </body> 
 <script type="text/javascript"> 
  function randomNum(m,n){ 
   return Math.floor(Math.random(n - m + 1) + m); 
  } 
  //cover设置背景尺寸 
  //将背景图按所在标签的宽高,缩放 
  document.body.style.backgroundSize = "cover"; 
  //设置body的背景图 
  document.body.style.backgroundImage = "url(img/bg.jpg)" ; 
  //事件设备:触发该事件需要硬件支持 
  //摇一摇功能: 
  //1.手机中的陀螺仪加速两次 加速器的差值当达到某个值时,则认为是手机晃动事件 
  //2.设置手机晃动事件前,获取加速器的值 
  //3.添加手机晃动事件;     
  //获取手机晃动前加速器的值,创建一个对象获取 
  var currentValue = { 
   x : 0, 
   y : 0, 
   z : 0 
  }; 
  //获取手机晃动之后加速器的值,创建一个对象获取 
  var lastValue = { 
   x : 0, 
   y : 0, 
   z : 0 
  } 
  //设置晃动的最小的距离,只有达到该距离时,才执行摇一摇事件 
  var minValue = 20; 
  //当手机触发摇一摇事件时,我们得到此时的位置信息,存储到一个p标签上 
  //理论上讲:陀螺仪事件中的加速器是无法静止的; 
  var p1 = document.createElement("p"); 
  //第一种方式: 
  var img1 = document.createElement("img"); 
  img1.style.width = "375px"; 
  img1.style.height = "560px"; 
  //手机晃动事件 
  window.ondevicemotion = function(e){ 
   //获取对象 
   var event1 = event || e; 
   //获取加速器对象,为了获取陀螺仪上的坐标信息 
   var acceleration = event1.accelerationIncludingGravity; 
   //记录当前加速器的值 
   currentValue.x = acceleration.x; 
   currentValue.y = acceleration.y; 
   currentValue.z = acceleration.z; 
   //判断微信摇一摇事件(手机是否晃动) 
   if (Math.abs(currentValue.x - lastValue.x) >= minValue || Math.abs(currentValue.y - lastValue.y) > minValue || Math.abs(currentValue.z - lastValue.z) > minValue) { 
    //说明摇一摇事件触发 
    //实现微信摇一摇,可以将摇一摇中的图片,作为body的背景图 
    //随机一张图片的下标(1 - 5) 
    var ranN = randomNum(1,6); 
    //创一个定时器 
    var timer = setInterval(function(){ 
     ranN ++ 
     if (ranN == 6) { 
      ranN = 1; 
     } 
     //为当前的body设置背景图 
     //document.body.style.backgroundImage = "url(img/"+ranN+".jpg)"; 
     //为当前img设置路径 
     img1.src = "img/"+ranN+".jpg"; 
      
    },200); 
    //设置一个延时器,延时一段时间后消除延时器 
    setTimeout(function(){ 
     clearInterval(timer); 
    },1000); 
   } 
   //记录最后的值(保存上一次晃动事件中的加速器的值) 
   lastValue.x = currentValue.x; 
   lastValue.y = currentValue.y; 
   lastValue.z = currentValue.z; 
  } 
  document.body.appendChild(img1); 
 </script> 
</html>

注意:该代码中没有上传图片,如需要运行需要自己在代码的同级目录创建一个img文件夹,里面放上从1到6的后缀为.jpg的图片

Javascript 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
一个简易的js图片轮播效果
Jul 22 #Javascript
基于JS脚本语言的基础语法详解
Jul 22 #Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 #Javascript
JS+HTML5实现图片在线预览功能
Jul 22 #Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 #jQuery
JS原生带小白点轮播图实例讲解
Jul 22 #Javascript
JS按钮闪烁功能的实现代码
Jul 21 #Javascript
You might like
星际争霸秘籍
2020/03/04 星际争霸
JavaScript 注册事件代码
2011/01/27 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
质检部部长职责
2013/12/16 职场文书
实习心得体会
2014/01/02 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
师德演讲稿范文
2014/05/06 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
销售内勤岗位职责
2015/02/10 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js