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

本文为大家分享了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的图片

赞 (0)

相关推荐

  • 微信JS接口汇总及使用详解

    基本说明 使用说明 1.引入JS文件 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js 备注:支持使用 AMD/CMD 标准模块加载方法加载 2.注入配置config接口 所有需要使用JSSDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用). 复制代码 代码如下: wx.config({  debug:

  • 微信WeixinJSBridge API使用实例

    注意:请在微信中测试 <!DOCTYPE html> <html> <head> <title>微信WeixinJSBridge API</title> <meta charset="utf-8" /> <script type="text/javascript"> (function(){ var a=document.getElementsByTagName("html

  • javascript实现修改微信分享的标题内容等

    代码超级简单,这里就不多废话了,小伙伴们自己看注释吧, 奉上代码: 复制代码 代码如下: <script> //微信分享 var wimg = "分享图片网址123"; var wurl = "分享网址123"; var wdesc = '分享内容123'; var wtit = '分享标题123'; var wappid = '';   function shareMsg() {//<span style="font-family: A

  • 微信JSSDK上传图片

    前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用.先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给uploadImage接口上传图片. 最近做的一个项目,刚好用到了JSSDK,把用到的东西整理下. 先附上微信开发者文档链接:微信开发者文档 主要用到了: 引入JS文件 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq

  • js实现微信分享代码

    js实现微信分享代码

    通常自己做的一个页面想通过微信像朋友分享时,展示的标题和描述都是不是自己想要的,自己查了一些资料,原来是通过js来进行控制 展示效果如下: 标题.描述.还有分享的图片都是有js来控制的. js代码如下 <script> var dataForWeixin = { appId: "", MsgImg: "Christmas/201012189457639.gif",//显示图片 TLImg: "Christmas/201012189457639.

  • Javascript限制网页只能在微信内置浏览器中访问

    Javascript限制网页只能在微信内置浏览器中访问

    那么问题就来了,这个网页首先涉及到了移动web前端开发,我优先选择了用HTML5+bootstrap组合来实现页面的美观效果,前端其他的任务交给javascript解决(这里我是完全使用原生javascript代码,没有用到任何的框架,因为考虑到手机加载网页的速度本来就慢,而且框架中很多用不到的功能也会随网页一起加载,耗费用户流量). 一切功能都就绪以后,客户试用也觉得很满意,之后我就把代码提交到了正式的服务器上.不过,对方又突然提到了一点:你做的页面确实挺漂亮的,兼容性也不错,但是这个页面用电

  • js实现通用的微信分享组件示例

    一.可定义的信息 1.分享时显示的LOGO:2.分享LOGO的宽度:3.分享LOGO的高度:4.分享出去显示的标题(默认调用网页标题):5.分享出去显示的描述(默认调用网页标题):6.分享链接(默认为当前页面的URL).7.分享微信的APPID(一般为空). 二.使用方法1.引入微信分享组件js: 复制代码 代码如下: /******************************* * Author:Mr.Think * Description:微信分享通用代码 * 使用方法:_WXShare

  • javascript html5摇一摇功能的实现

    通过网上的资料,加上自己的整理,写了一份html摇一摇功能的简介,用做技术备份. 知识要点 1.DeviceMotionEvent     这是html5支持的重力感应事件,关于文档请看:http://w3c.github.io/deviceorientation/spec-source-orientation.html 事件介绍: deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角. devicemotion 提供设备的加速信息,表示为定义在设备上的坐标系

  • 使用Nodejs开发微信公众号后台服务实例

    使用Nodejs开发微信公众号后台服务实例

    摘要: 微信,庞大的用户基数,极强的用户粘性,在近两年吸引了无数的开发者注意力. Nodejs,近两年发展非常快的开发工具,尤其适合构建移动后台.本文就以笔者自己开发的实例,来描述如何基于Nodejs开发属于自己的微信公众号.在这个实例中,主要使用到了express, wechat, mongodb, monk等模块. 前期准备: 1.申请微信公众号,前往 https://mp.weixin.qq.com/  申请,这里不做过多阐述. 2. 购买服务器, 这里推荐Amazon的EC2,首次用户可

  • js如何判断用户是否是用微信浏览器

    上周接到个需求,需求是这样的:用户扫一扫二维码会产生一个链接,该链接会向后端发送个请求,返回一个 apk 的下载地址,用户点击下载按钮可以下载此 apk.然后就发生了问题,经过测试,发现用微信扫一扫打开的页面点击下载按钮下载不了 apk,后百度之,原来是微信内置浏览器屏蔽了下载链接,后面和需求方沟通,需求改为如果用户是用微信内置浏览器打开的,则提示用户换一个浏览器打开页面,否则下载不了 apk.那么该如何判断用户是否是用微信浏览器呢? 我们知道 js 可以通过 window.navigator.

随机推荐