DeviceOrientation特点:
<ul class='ul_demo'> <li>封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。</li> <li>封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。</li> </ul>
div#hand是用来放置一个手摇的图片,而div#result则表示摇动后的结果。
<div id="hand" class="hand hand-animate"></div>
<div id="result"></div>
“摇一摇”这个动作即“一定时间内设备了一定距离”,因此通过devicemotion监听设备晃动获取到的x, y, z轴的 值在一定时间范围内的变化率,即判断设备是否有进行晃动。而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值。
HTML5判断设备晃动的代码我们使用已经封装好的,<a href='https://github.com/alexgibson/shake.js'>点击下载shake.js</a>。
<script src="shake.js"></script>
首先实例化Shake,然后启动开始监听设备运动情况,监听设备运动,回调监听结果:shakeEventDidOccur。
window.onload = function() {
var myShakeEvent = new Shake({
threshold: 15
});
myShakeEvent.start();
window.addEventListener('shake', shakeEventDidOccur, false);
function shakeEventDidOccur () {
var result = document.getElementById("result");
result.className = "result";
var arr = ['妹子一枚','福利图片一套','码农笔记一本','土豪金一台'];
var num = Math.floor(Math.random()*4);
result.innerHTML = "恭喜,摇得"+arr[num]+"!";
setTimeout(function(){
result.className = "result result-show";
}, 1000);
}
};
这里,函数shakeEventDidOccur()可以自定义,本例是将摇晃后的结果返回在页面上展示出来,请看DEMO演示。
二维码链接生成跳转,可以参考素材火的jquery+qrcode生成二维码<a href='http://www.sucaihuo.com/jquery/demo/0/13/'>http://www.sucaihuo.com/jquery/demo/0/13/</a>,或者用php生成二维码:<a href='http://www.sucaihuo.com/js/247.html'>http://www.sucaihuo.com/js/247.html</a>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791