怎樣使用JS+H5實(shí)現(xiàn)微信搖一搖

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:47:20

怎樣使用JS+H5實(shí)現(xiàn)微信搖一搖

怎樣使用JS+H5實(shí)現(xiàn)微信搖一搖:這次給大家?guī)碓鯓邮褂肑S+H5實(shí)現(xiàn)微信搖一搖，使用JS+H5實(shí)現(xiàn)微信搖一搖的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。項(xiàng)目終于如約上線，但是在春節(jié)前又有一個(gè)新的活動(dòng)要做，類似微信的搖一搖活動(dòng)。也一直在做微信公眾號的東西，但是要調(diào)用微信搖一搖的

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀怎樣使用JS+H5實(shí)現(xiàn)微信搖一搖:這次給大家?guī)碓鯓邮褂肑S+H5實(shí)現(xiàn)微信搖一搖，使用JS+H5實(shí)現(xiàn)微信搖一搖的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。項(xiàng)目終于如約上線，但是在春節(jié)前又有一個(gè)新的活動(dòng)要做，類似微信的搖一搖活動(dòng)。也一直在做微信公眾號的東西，但是要調(diào)用微信搖一搖的

這次給大家?guī)碓鯓邮褂肑S+H5實(shí)現(xiàn)微信搖一搖，使用JS+H5實(shí)現(xiàn)微信搖一搖的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

項(xiàng)目終于如約上線，但是在春節(jié)前又有一個(gè)新的活動(dòng)要做，類似微信的搖一搖活動(dòng)。也一直在做微信公眾號的東西，但是要調(diào)用微信搖一搖的接口還是有些困難，因?yàn)橹惶峁┝藫u一搖周邊，附近的人以及一系列的紅包頁面，相對于我們的需求只需要搖一搖這個(gè)動(dòng)作卻是大相徑庭。

其實(shí)H5+JavaScript寫出來的頁面，通過獲取手機(jī)的屏幕長和寬，以及添加聲音等就可以實(shí)現(xiàn)搖一搖的效果。

第一步，實(shí)現(xiàn)手機(jī)搖動(dòng)改變顏色

<!doctype html> 
<html> 
 <head> 
 <meta charset="utf-8" /> 
 <meta name="viewport" content="width=device-width,initial-scale=1.0"/> 
 <title>HTML5 手機(jī)搖一搖</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> 
 手機(jī)搖一搖，改變屏幕顏色。 
 </body> 
</html>

主要是手機(jī)的DeviceMotionEvent事件

第二步，微信搖一搖手勢

相對于第一步就是增加了搖一搖手勢，改變了搖動(dòng)事件。在搖一搖動(dòng)作之后再添加自己想要的方法即可，無論是想要進(jìn)入下一個(gè)自己做的頁面還是觸發(fā)一個(gè)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(); 
 //在此為搖動(dòng)之后的事件，這里為調(diào)用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>正確姿勢：握緊手機(jī)，用力搖動(dòng)3秒，苦練18年的麒麟臂終于派上用場了。</td> 
 </tr> 
 </tbody> 
 </table> 
</body> 
</html>

有時(shí)候真的可以換一種方法去實(shí)現(xiàn)自己想要的功能。附圖：demo本來實(shí)現(xiàn)的效果是: