本文為大家分享了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的圖片
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
