Home >Web Front-end >JS Tutorial >How to use JS+H5 to implement WeChat shake
This time I will show you how to use JS H5 to implement WeChat shake, and what are the precautions for using JS H5 to implement WeChat shake. The following is a practical case, let's take a look.
The project was finally launched as scheduled, but there is a new activity to be done before the Spring Festival, similar to WeChat’s shake activity. We have also been working on WeChat public accounts, but it is still a bit difficult to call the WeChat Shake interface, because it only provides Shake peripherals, nearby people and a series of red envelope pages. Compared to our needs, we only need to shake The action of shaking is completely different. In fact, the page written in H5
The first step is to shake the phone to change the color
<!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>Mainly the DeviceMotionEvent
The second step, WeChat shake gesture
Compared with the first step, the shake gesture is added and the shake event is changed. Just add the method you want after the shake action, whether you want to enter the next page you create or trigger a Controller event.<%@ 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> Sometimes you can really use another method to achieve the function you want. Attached picture: The original effect of the demo is: 
Detailed explanation of Vue key modifier event processing steps
##JS CSS3 to make image binding mouse move event amplificationThe above is the detailed content of How to use JS+H5 to implement WeChat shake. For more information, please follow other related articles on the PHP Chinese website!