<!DOCTYPE html>
<html>
<head>
<meta charset=”gbk” />
<meta name=”viewport” content=”initial-scale=1.0, width=device-width, user-scalable=no” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<title>安卓手机web震动效果js代码</title>
<style type=”text/css”>
body {
background: #E9E9E9;
color: #333;
font: 1em/1.3em “Helvetica Neue”, Helvetica, Arial, Verdana, sans-serif; /* 16px / 21px */
text-shadow: rgba(255,255,255,0.8) 0 1px 0;
text-align: center;
}
</style>
</head>
<body>
<h2>进入页面之前震动2次</h2>
<br><br><br><br>
<h2>摇一摇震动3次</h2>
<script>
//进入页面单纯震动
navigator.vibrate(2000) // 震动2s
window.navigator.vibrate([1000,1000,1000,1000]);
//震动结束
//运动事件监听
if (window.DeviceMotionEvent) {
window.addEventListener(‘devicemotion’,deviceMotionHandler,false);
}
//获取加速度信息
//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,进行设备是否有进行晃动的判断。
//而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值。
var SHAKE_THRESHOLD = 4000;
var last_update = 0;
var x, y, z, last_x = 0, last_y = 0, last_z = 0;
function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime-last_update)> 10) {
var diffTime = curTime -last_update;
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) {
alert(“摇一摇开始震动啦!”); // Do something
//开始震动
navigator.vibrate(2000) // 震动2s
window.navigator.vibrate([1000,1000,1000,1000,1000]);
//震动结束
}
last_x = x;
last_y = y;
last_z = z;
}
}
</script>
</body>
</html>