Rumah > Artikel > hujung hadapan web > 微信“摇一摇”功能是怎么实现的？

微信“摇一摇”功能是怎么实现的？

零下一度asal: 2017-07-19 17:32:492561semak imbas

微信“摇一摇”功能是怎么实现的？

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
background: red;
font-size: 20px;
color: #fff;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
toShake(function(){
alert("您进行了摇一摇");
});
function toShake(callBack){
var RANGE = 60;//当用户摇晃的幅度超过这个值，我们认定用户在摇一摇
var isShake = false;//是否进行了摇一摇
var lastX,lastY,lastZ;
var lastTime = Date.now();
window.addEventListener(&#39;devicemotion&#39;, function(e) {
var nowTime = Date.now();
//拉开执行的间隔，让iso和安卓的执行频率接近一致
if(nowTime - lastTime < 100){
return;
}
lastTime = nowTime;
var motion = e.accelerationIncludingGravity;
var x = motion.x;
var y = motion.y;
var z = motion.z;
if(typeof lastX == "undefined"){//第一次进来还没有上一次的值
lastX = x;
lastY = y;
lastZ = z;
return;
}
var nowRange = Math.abs(x - lastX) + Math.abs(y - lastY) + Math.abs(z - lastZ);
if(nowRange > RANGE){
isShake = true;
} 
//当用户进行了剧烈的摇动，我们就认定用户进行了摇一摇，然后摇晃幅度慢下来之后，执行摇一摇函数
if(isShake&&nowRange < 20){
callBack&&callBack();
isShake = false;
}
lastX = x;
lastY = y;
lastZ = z;
});
}
</script>
</body>
</html>

Atas ialah kandungan terperinci 微信“摇一摇”功能是怎么实现的？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：前端工程化体系建设介绍Artikel seterusnya：详解自己对Vue.js的理解

Artikel berkaitan

Lihat lagi