首页 > 代码库 > 手机摇一摇效果-html5
手机摇一摇效果-html5
1.手机摇一摇效果实现
2.播放声音
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>摇一摇功能</title> <script type="text/javascript"> //Javascript </script></head><body onload="init()"><p>用力摇一摇你手机</p><audio id="musicBox" preload="metadata" controls src="5018.mp3" autostart="0"></audio><div id="btn" class="btn">点击播放</div><script type="text/javascript"> var SHAKE_THRESHOLD = 3000; var last_update = 0; var media = document.getElementById("musicBox"); var btn = document.getElementById("btn"); var x = y = z = last_x = last_y = last_z = 0; function init() { if (window.DeviceMotionEvent) { window.addEventListener(‘devicemotion‘, deviceMotionHandler, false); } else { alert(‘not support mobile event‘); } } function deviceMotionHandler(eventData) { var acceleration = eventData.accelerationIncludingGravity; var curTime = new Date().getTime(); if ((curTime - last_update) > 100) { 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) { //media.setAttribute("autostart", 1); //media.setAttribute("src", "5018.mp3"); //media.load(); media.play();
alert("弹窗了"); } last_x = x; last_y = y; last_z = z; } }</script></body></html>
IOS 测试：Safari 弹框\不播放音乐, Chroma 弹框\不播放音乐,UC弹框\不播放音乐
Andriod 测试：UC弹框\播放音乐,Chroma 弹框\播放音乐,内置浏览器 弹框\播放音乐 红米note 自带浏览器 弹窗/不播放
文件下载：http://files.cnblogs.com/zhidong123/yao-yao.rar
手机摇一摇效果-html5
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。