900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 利用html5实现类似微信的手机摇一摇功能

利用html5实现类似微信的手机摇一摇功能

时间:2023-04-19 23:05:53

相关推荐

利用html5实现类似微信的手机摇一摇功能

利用html5实现类似微信的手机摇一摇功能,并播放音乐。

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

2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。

不多说直接上代码,

Javascript:

[javascript]view plain copy varSHAKE_THRESHOLD=3000;varlast_update=0;varx=y=z=last_x=last_y=last_z=0;functioninit(){if(window.DeviceMotionEvent){window.addEventListener('devicemotion',deviceMotionHandler,false);}else{alert('notsupportmobileevent');}}functiondeviceMotionHandler(eventData){varacceleration=eventData.accelerationIncludingGravity;varcurTime=newDate().getTime();if((curTime-last_update)>100){vardiffTime=curTime-last_update;last_update=curTime;x=acceleration.x;y=acceleration.y;z=acceleration.z;varspeed=Math.abs(x+y+z-last_x-last_y-last_z)/diffTime*10000;if(speed>SHAKE_THRESHOLD){alert("摇动了");media.setAttribute("src","http://211.148.5.228:8002/Pages/test/Kalimba.mp3");media.load();media.play();}last_x=x;last_y=y;last_z=z;}}

Html:

[html]view plain copy <!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>摇一摇功能</title><scripttype="text/javascript">//Javascript</script></head><bodyοnlοad="init()"><p>用力摇一摇你手机</p><audiostyle="display:hiden"id="musicBox"preload="metadata"controlssrc="http://211.148.5.228:8002/Pages/test/Kalimba.mp3"autoplay="false"></audio></body></html>

IOS 测试:Safari 弹框\不播放音乐, Chroma 弹框\不播放音乐,UC弹框\不播放音乐

Andriod 测试:UC弹框\播放音乐,Chroma 弹框\播放音乐,内置浏览器弹框\播放音乐

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。