首頁  >  文章  >  web前端  >  怎麼使用JS+H5實現微信搖一搖

怎麼使用JS+H5實現微信搖一搖

php中世界最好的语言
php中世界最好的语言原創
2018-05-24 09:48:062691瀏覽

這次帶給大家怎樣使用JS H5實現微信搖一搖,使用JS H5實現微信搖一搖的注意事項有哪些,下面就是實戰案例,一起來看一下。

專案終於如約上線,但是在春節前又有一個新的活動要做,類似微信的搖一搖活動。也一直在做微信公眾號的東西,但是要調用微信搖一搖的接口還是有些困難,因為只提供了搖一搖週邊,附近的人以及一系列的紅包頁面,相對於我們的需求只需要搖一搖這個動作卻是大相逕庭。

其實H5 JavaScript寫出來的頁面,透過取得手機的螢幕長度和寬度,以及增加聲音等就可以實現搖一搖的效果。

第一步,實作手機搖晃改變顏色

<!doctype html> 
<html> 
 <head> 
 <meta charset="utf-8" /> 
 <meta name="viewport" content="width=device-width,initial-scale=1.0"/> 
 <title>HTML5 手机摇一摇</title> 
  <script type="text/javascript"> 
   var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff'); 
   if(window.DeviceMotionEvent) { 
    var speed = 25; 
    var x = y = z = lastX = lastY = lastZ = 0; 
    window.addEventListener('devicemotion', function(){ 
     var acceleration =event.accelerationIncludingGravity; 
     x = acceleration.x; 
     y = acceleration.y; 
     if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) { 
      document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6]; 
     } 
     lastX = x; 
     lastY = y; 
    }, false); 
   } 
  </script> 
 </head> 
 <body> 
    手机摇一摇,改变屏幕颜色。 
 </body> 
</html>

主要是手機的DeviceMotionEvent事件

第二步,微信搖一搖手勢

相對於第一步就是增加了搖一搖手勢,改變了搖動事件。在搖一搖動作之後再加入自己想要的方法即可,無論是想要進入下一個自己做的頁面還是觸發一個Controller事件都可以。

<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"> 
 <title>摇一摇</title> 
 <link rel="stylesheet" href="plug-in/liuliangbao/shake/css/shake.css" rel="external nofollow" > 
 <link rel="stylesheet" href="plug-in/liuliangbao/shake/css/myDialog.css" rel="external nofollow" > 
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/jquery.min.js"></script> 
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/howler.min.js"></script> 
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/fastclick.js"></script> 
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/myDialog.js"></script> 
 
 <script type="text/javascript"> 
   var SHAKE_THRESHOLD = 1000; 
   var last_update = 0; 
   var last_time = 0; 
   var x; 
   var y; 
   var z; 
   var last_x; 
   var last_y; 
   var last_z; 
   var sound = new Howl({ urls: ['/shake/sound/shake_sound.mp3'] }).load(); 
   var findsound = new Howl({ urls: ['/shake/sound/shake_match.mp3'] }).load(); 
   var curTime; 
   var isShakeble = true; 
 
   function init() { 
    if (window.DeviceMotionEvent) { 
     window.addEventListener('devicemotion', deviceMotionHandler, false); 
    } else { 
     $("#cantshake").show(); 
    } 
   } 
 
   function deviceMotionHandler(eventData) { 
    curTime = new Date().getTime(); 
    var diffTime = curTime - last_update; 
    if (diffTime > 100) { 
     var acceleration = eventData.accelerationIncludingGravity; 
     last_update = curTime; 
     x = acceleration.x; 
     y = acceleration.y; 
     z = acceleration.z; 
     var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; 
  
     if (speed > SHAKE_THRESHOLD && curTime - last_time > 1100 && $("#loading").attr('class') == "loading" && isShakeble) { 
      shake(); 
     } 
     last_x = x; 
     last_y = y; 
     last_z = z; 
    } 
   } 
 
   function shake() { 
    last_time = curTime; 
    $("#loading").attr('class','loading loading-show'); 
    $("#shakeup").animate({ top: "10%" }, 700, function () { 
     $("#shakeup").animate({ top: "25%" }, 700, function () { 
      $("#loading").attr('class','loading'); 
  
      findsound.play(); 
        //在此为摇动之后的事件,这里为调用ControllergoShakeResult方法 
      window.location.href = "shakeController.do?goShakeResult&phoneNumber=${phoneNumber}&hdid=${hdid}&openid=${openid}"; 
     }); 
    }); 
    $("#shakedown").animate({ top: "40%" }, 700, function () { 
     $("#shakedown").animate({ top: "25%" }, 700, function () { 
     }); 
    }); 
    sound.play(); 
   } 
 
   //各种初始化 
   $(document).ready(function () { 
    Howler.iOSAutoEnable = false; 
    FastClick.attach(document.body); 
    init(); 
   }); 
 </script> 
</head> 
<body> 
 <table id="container"> 
   <tbody> 
       <tr> 
        <td class="container" colspan="2"> 
       <p id="shake"> 
        <img src="plug-in/liuliangbao/shake/images/inner.png" class="inner"> 
        <img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_up" id="shakeup"> 
        <img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_down" id="shakedown"> 
         </p><p id="loading" class="loading"></p> 
        </td> 
     </tr> 
     <tr> 
      <td> 
       您今天还可以摇<input id="shakeCount" name="shakeCount" value="${leftcount}">次 
      </td> 
     </tr> 
     <tr> 
      <td>正确姿势:握紧手机,用力摇动3秒,苦练18年的麒麟臂终于派上用场了。</td> 
     </tr> 
    </tbody> 
 </table> 
</body> 
</html>

有時候真的可以換個方法去實現自己想要的功能。附圖:demo原本達到的效果是:

                   

#已閱讀閱讀完文章後

##讀了這篇文章案例後

##在閱讀這篇文章之後

##################了案例之後########################了案例之後########################閱讀閱讀文章。你已經掌握了方法,更多精彩請關注php中文網其它相關文章! ######推薦閱讀:#########Vue按鍵修飾符處理事件步驟詳解############JS CSS3做出圖片綁定滑鼠移動事件放大# #####

以上是怎麼使用JS+H5實現微信搖一搖的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn