版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/longlc123/article/details/81671623
html5+或者html5plus 现在会有更多新特性，而且还可以调用底层硬件信息。可以去 MDN 去查查相关的事件和方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="full-screen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
html {
font-style: 24px;
}
body {
/*height: auto;
min-height: 100%;*/
/*overflow:hidden;*/
position: absolute;
bottom: 0;
top: 0;
/*height: 100vh;*//* 在浏览器中有问题 */
-webkit-overflow-scrolling: touch;
}
.content {
width: 100vw;
height: 100%;/* 继承body 的高*/
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
}
</style>
</head>
<body>
<div class="content">
h5支持调用设备加速器
通过widow对象中DeviceMotionEvent 来判断 浏览器（手机）是否支持访问硬件资源。<br/>
window.addEventListener('devicemotion', deviceMotionHandler, false);<br/>
var acceleration = eventData.accelerationIncludingGravity; <br/>获得加速器对象，x = acceleration.x;y = acceleration.y; z = acceleration.z; 分别获取传感器三个分量的参数，这样就完成了对摇一摇参数的获取。
</div>
<script>
var SHAKE_THRESHOLD = 50000;
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('我可以摇动了！！！');
}
last_x = x;
last_y = y;
last_z = z;
}
}
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler,false);
} else {
document.getElementById("dmEvent").innerHTML = "Not supported on your device."
}
/*var SHAKE_THRESHOLD = 50000;
var last_update = 0;
var vibrateSupport = "vibrate" in navigator;
if (vibrateSupport) { //兼容不同的浏览器
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
}
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
}
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var currTime = new Date().getTime();
var diffTime = currTime - last_update;
console.info(diffTime);
if (diffTime > 100) {
last_update = currTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 30000;
console.info(speed);
if (speed > SHAKE_THRESHOLD) {
//要一摇之后进行业务逻辑处理
// doResult();
alert('我可以摇动了！！！');
}
last_x = x;
last_y = y;
last_z = z;
}
}*/
</script>
</body>
</html>微信小程序 摇一摇 实现
//首先定义一下，全局变量
var lastTime = 0; //此变量用来记录上次摇动的时间
var x = 0,
y = 0,
z = 0,
lastX = 0,
lastY = 0,
lastZ = 0; //此组变量分别记录对应x、y、z三轴的数值和上次的数值
var shakeSpeed = 110; //设置阈值
//编写摇一摇方法
function shake(acceleration) {
var nowTime = new Date().getTime(); //记录当前时间
//如果这次摇的时间距离上次摇的时间有一定间隔 才执行
if (nowTime - lastTime > 100) {
var diffTime = nowTime - lastTime; //记录时间段
lastTime = nowTime; //记录本次摇动时间，为下次计算摇动时间做准备
x = acceleration.x; //获取x轴数值，x轴为垂直于北轴，向东为正
y = acceleration.y; //获取y轴数值，y轴向正北为正
z = acceleration.z; //获取z轴数值，z轴垂直于地面，向上为正
//计算 公式的意思是 单位时间内运动的路程，即为我们想要的速度
var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
//console.log(speed)
if (speed > shakeSpeed) { //如果计算出来的速度超过了阈值，那么就算作用户成功摇一摇
wx.stopAccelerometer()
self.setData({
hasInit: false,
canvas: {}
})
audioCtx.setSrc('http://123.207.0.183/application/images/s.mp3')
audioCtx.play()
wx.showLoading({
title: '寻找大神中...'
})
config.request({
// 要请求的地址
url: config.service.taRan,
success(e) {
setTimeout(function () {
//console.log(e.data)
audioCtx.setSrc('http://123.207.0.183/application/images/r.mp3')
audioCtx.play()
self.uid = e.data
self.con = ''
self.onInitShow()
}, 2000)
}
})
}
lastX = x; //赋值，为下一次计算做准备
lastY = y; //赋值，为下一次计算做准备
lastZ = z; //赋值，为下一次计算做准备
}
}
wx.onAccelerometerChange(shake)
//wx.startAccelerometer()
//小程序的 Audio API 只能使用网络音频资源。
var audioCtx = wx.createAudioContext('myAudio')