• 使用Html5的DeviceOrientation特性实现摇一摇功能


    如今非常多的手机站点上也有类似于微信一样的摇一摇功能了,比方什么摇一摇领取红包,领取礼品等等

    1,deviceOrientation:封装了方向传感器数据的事件,能够获取手机静态状态下的方向数据,如手机所处的角度,方位,朝向等

    2,deviceMotion:封装了运动传感器数据事件,能够获取手机运动状态下的运动加速度数据

    多说无益,代码才健康:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    		<title>摇一摇功能</title>
    		<script type="text/javascript">
    			window.onload=function(){init();}
    			var SHAKE_THRESHOLD=3000;//定义一个摇动的阈值
    			var last_update=0;//定义一个变量记录上一次摇动的时间
    			var x=y=z=last_x=last_y=last_z=0;//定义x、y、z记录三个轴的数据以及上一次触发的时间
    			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();//获取当前时间戳
    				var diffTime=curTime-last_update;
    				if(diffTime>100){
    					last_update=curTime;//记录上一次摇动的时间
    					x=acceleration.x;//获取加速度X方向
    					y=acceleration.y;//获取加速度Y方向
    					z=acceleration.z;//获取加速度垂直方向
    					var speed=Math.abs(x+y+z-last_x-last_y-last_z)/diffTime*10000;//计算阈值
    					if(speed>SHAKE_THRESHOLD){
    						alert("摇动了,关闭播放自己主动播放");
    						var media=document.getElementById("musicBox");//获取音频控件
    						media.setAttribute("src","http://192.168.1.125/mohe/upload/audio/20140930/20140930114522_485.mp3");
    						media.load();//载入音频
    						media.play();//播放音频
    					}
    					//记录上一次加速度
    					last_x=x;
    					last_y=y;
    					last_z=z;
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<p>摇一摇播放音乐吧</p>
    		<audio id="musicBox" controls="true" src=""/>
    	</body>
    </html>

    直接贴上就能够使用,但音乐链接要自己准备哦


  • 相关阅读:
    如果前面的IO操作出问题了,按照我们代码的意思,不就try catch 了吗,这样的话线程就没关闭了,就会造成线程泄露。 那怎么解决这个问题呢,其实也简单,把关闭线程的方法写到finally里就可以了。
    Dataeye计算任务架构
    Mercury:唯品会全链路应用监控系统解决方案详解(含PPT)
    app 爬虫
    唯品会HDFS性能挑战和优化实践
    构建Hadoop监控共同体
    消除单点故障 flume
    时间戳 Flume's Memory Consumption
    telnet nmap netstap
    hdfs ha
  • 原文地址:https://www.cnblogs.com/blfshiye/p/4259161.html
Copyright © 2020-2023  润新知