溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS實(shí)現(xiàn)微信搖一搖原理解析

發(fā)布時(shí)間：2020-08-23 18:24:40 來源：腳本之家 閱讀：433 作者：motokay 欄目：web開發(fā)

本文為大家分享了JS實(shí)現(xiàn)微信搖一搖的原理，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)原理：

1.微信搖一搖事件需要有硬件支撐，必須要求手機(jī)中有陀螺儀
2.在JS中給window添加ondevectionmotion事件。該事件在手機(jī)晃動，即手機(jī)中的陀螺儀發(fā)生旋轉(zhuǎn)，該事件會觸發(fā)
3.觸發(fā)ondevectionmotion事件，會產(chǎn)生一個(gè)事件對象，通過該對象中的鍵值(accelerationIncludingGravity)來獲得該重力加速器對象
4.重力加速器對象中含有陀螺儀的坐標(biāo)，通過重力加速器對象.x - .y - .z 獲取陀螺儀當(dāng)前的坐標(biāo)

<!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設(shè)置背景尺寸 
  //將背景圖按所在標(biāo)簽的寬高，縮放 
  document.body.style.backgroundSize = "cover"; 
  //設(shè)置body的背景圖 
  document.body.style.backgroundImage = "url(img/bg.jpg)" ; 
  //事件設(shè)備：觸發(fā)該事件需要硬件支持 
  //搖一搖功能： 
  //1.手機(jī)中的陀螺儀加速兩次 加速器的差值當(dāng)達(dá)到某個(gè)值時(shí)，則認(rèn)為是手機(jī)晃動事件 
  //2.設(shè)置手機(jī)晃動事件前，獲取加速器的值 
  //3.添加手機(jī)晃動事件;     
  //獲取手機(jī)晃動前加速器的值,創(chuàng)建一個(gè)對象獲取 
  var currentValue = { 
   x : 0, 
   y : 0, 
   z : 0 
  }; 
  //獲取手機(jī)晃動之后加速器的值,創(chuàng)建一個(gè)對象獲取 
  var lastValue = { 
   x : 0, 
   y : 0, 
   z : 0 
  } 
  //設(shè)置晃動的最小的距離，只有達(dá)到該距離時(shí)，才執(zhí)行搖一搖事件 
  var minValue = 20; 
  //當(dāng)手機(jī)觸發(fā)搖一搖事件時(shí)，我們得到此時(shí)的位置信息，存儲到一個(gè)p標(biāo)簽上 
  //理論上講：陀螺儀事件中的加速器是無法靜止的; 
  var p1 = document.createElement("p"); 
  //第一種方式： 
  var img1 = document.createElement("img"); 
  img1.style.width = "375px"; 
  img1.style.height = "560px"; 
  //手機(jī)晃動事件 
  window.ondevicemotion = function(e){ 
   //獲取對象 
   var event1 = event || e; 
   //獲取加速器對象，為了獲取陀螺儀上的坐標(biāo)信息 
   var acceleration = event1.accelerationIncludingGravity; 
   //記錄當(dāng)前加速器的值 
   currentValue.x = acceleration.x; 
   currentValue.y = acceleration.y; 
   currentValue.z = acceleration.z; 
   //判斷微信搖一搖事件（手機(jī)是否晃動） 
   if (Math.abs(currentValue.x - lastValue.x) >= minValue || Math.abs(currentValue.y - lastValue.y) > minValue || Math.abs(currentValue.z - lastValue.z) > minValue) { 
    //說明搖一搖事件觸發(fā) 
    //實(shí)現(xiàn)微信搖一搖，可以將搖一搖中的圖片，作為body的背景圖 
    //隨機(jī)一張圖片的下標(biāo)（1 - 5） 
    var ranN = randomNum(1,6); 
    //創(chuàng)一個(gè)定時(shí)器 
    var timer = setInterval(function(){ 
     ranN ++ 
     if (ranN == 6) { 
      ranN = 1; 
     } 
     //為當(dāng)前的body設(shè)置背景圖 
     //document.body.style.backgroundImage = "url(img/"+ranN+".jpg)"; 
     //為當(dāng)前img設(shè)置路徑 
     img1.src = "img/"+ranN+".jpg"; 
      
    },200); 
    //設(shè)置一個(gè)延時(shí)器，延時(shí)一段時(shí)間后消除延時(shí)器 
    setTimeout(function(){ 
     clearInterval(timer); 
    },1000); 
   } 
   //記錄最后的值（保存上一次晃動事件中的加速器的值） 
   lastValue.x = currentValue.x; 
   lastValue.y = currentValue.y; 
   lastValue.z = currentValue.z; 
  } 
  document.body.appendChild(img1); 
 </script> 
</html>

注意：該代碼中沒有上傳圖片，如需要運(yùn)行需要自己在代碼的同級目錄創(chuàng)建一個(gè)img文件夾，里面放上從1到6的后綴為.jpg的圖片

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手