html5+或者html5plus 现在会有更多新特性，而且还可以调用底层硬件信息。可以去 MDN 去查查相关的事件和方法。
!DOCTYPE htmlhtml 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" titleDocument/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/headbody 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')
