HTML5实现摇一摇的功能（实测后）

最新推荐文章于 2021-06-20 04:11:03 发布
最新推荐文章于 2021-06-20 04:11:03 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： jQuery

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

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

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

不多说直接上代码，

Javascript：

[javascript]  view plain copy
  1. var SHAKE_THRESHOLD = 3000;  
  2.         var last_update = 0;  
  3.         var x = y = z = last_x = last_y = last_z = 0;  
  4.         function init() {  
  5.             if (window.DeviceMotionEvent) {  
  6.                 window.addEventListener('devicemotion', deviceMotionHandler, false);  
  7.             } else {  
  8.                 alert('not support mobile event');  
  9.             }  
  10.         }  
  11.         function deviceMotionHandler(eventData) {  
  12.             var acceleration = eventData.accelerationIncludingGravity;  
  13.             var curTime = new Date().getTime();  
  14.             if ((curTime - last_update) > 100) {  
  15.                 var diffTime = curTime - last_update;  
  16.                 last_update = curTime;  
  17.                 x = acceleration.x;  
  18.                 y = acceleration.y;  
  19.                 z = acceleration.z;  
  20.                 var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;  
  21.   
  22.                 if (speed > SHAKE_THRESHOLD) {  
  23.                     alert("摇动了");  
  24.                     media.setAttribute("src", "http://211.148.5.228:8002/Pages/test/Kalimba.mp3");  
  25.                     media.load();  
  26.                     media.play();    
  27.                 }  
  28.                 last_x = x;  
  29.                 last_y = y;  
  30.                 last_z = z;  
  31.             }  
  32.         }  

Html：

[html]  view plain copy
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  7.     <title>摇一摇功能</title>  
  8.     <script type="text/javascript">  
  9.         //Javascript  
  10.     </script>  
  11. </head>  
  12. <body onload="init()">  
  13. <p>用力摇一摇你手机</p>  
  14. <audio style="display:hiden" id="musicBox" preload="metadata" controls src="http://211.148.5.228:8002/Pages/test/Kalimba.mp3" autoplay="false">  
  15. </audio>  
  16. </body>  
  17. </html>  

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

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

zlking02
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML5模拟微信摇一摇
07-29
HTML5模拟微信摇一摇功能，有两种方式实现，分别在代码中实现
我所找到的所有的html5小游戏实测都可用.rar
05-10
HTML5是一种先进的网页标准，它极大地扩展了网页的交互性和功能。这个压缩包"我所找到的所有的html5小游戏实测都可用.rar"显然包含了多个基于HTML5开发的小游戏，这些游戏无需安装，只需在支持HTML5的浏览器上运行...
HTML5实现摇一摇
u011927449的博客
11-08 484
一、原理： 利用devicemotion获取移动速度，得到device移动时相对之前某个时间的差值比 二、效果图： 三、源码： //先判断设备是否支持HTML5摇一摇功能 if (win...
html5摇一摇[转]
weixin_33962621的博客
01-24 67
写在前面 年底了，有些公司会出一个摇奖的活动，今天在家没事就搜了一下这方面的资料。 原文地址：http://www.cnblogs.com/waitingbar/p/4682215.html 测试 效果还行。 1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;m...
HTML5实现摇一摇功能
g_blue_wind的博客
10-21 746
//先判断设备是否支持HTML5摇一摇功能 if (window.DeviceMotionEvent) {     //获取移动速度，得到device移动时相对之前某个时间的差值比     window.addEventListener('devicemotion', deviceMotionHandler, false); }else{     alert(
JavaScript实现复制功能各浏览器支持情况实测
10-27
两天在做Web前端时，遇到需求通过js实现文本复制的功能，下面与大家分享下各浏览器对复制功能的支持情况，感兴趣的朋友可以参考下哈
基于matlab实现的实测一组机械系统的振动信号
最新发布
05-02
基于matlab实现的实测一组机械系统的振动信号，记录采样频率、采样点数，估计该组振动信号的均值、基于matlab实现的均方值、方差、自相关函数和功率谱，其中功率谱估计对比频率平滑与分段平滑的效率，针对分段平滑、...
C#实现winform串口通信 【实测成功】
11-19
该文件还附上一个简单的C#编写的简易计算器实现代码项目 使用visual studio 2019、.net 4.7.2且积分多的博友可以下载后直接运行，想学习过程而且不怕麻烦的博友建议按博主的博文去自己尝试编写...
HTML实现“摇一摇”效果
易龙元泰的专栏
04-04 788
转自： 在HTML5中，DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。 而通过DeviceMotion对设备运动状态的判断，则可以帮助我们在网页上就实现“摇一摇”的交互效果。 事件监听 演示地址：http://
html5实现的摇一摇
03-24
html5 video 摇一摇代码实现 html5
html5 实现摇一摇功能
04-11
NULL 博文链接：https://yongkuang.iteye.com/blog/1680869
Html5+JS实现手机摇一摇功能
09-28
主要介绍了Html5+JS实现手机摇一摇功能,本文使用HTML5的DeviceOrientation实现监听手机方向传感器数据,实现摇一摇功能雏形,需要的朋友可以参考下
javascript html5摇一摇功能的实现
11-23
通过网上的资料，加上自己的整理，写了一份html摇一摇功能的简介，用做技术备份。 知识要点  1、DeviceMotionEvent     这是html5支持的重力感应事件，关于文档请看：http://w3c.github.io/deviceorientation/spec-source-orientation.html 事件介绍： deviceorientation 提供设备的物理方向信息，表示为一系列本地坐标系的旋角。 devicemotion 提供设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话，事件应该提供设备重心处的加速信息。
html5 摇一摇,HTML 5实现的手机摇一摇
weixin_33283907的博客
06-20 252
自从HTML 5的DeviceOrientation被开发出来，很多开发者开始研究其特性，并对此开发出了摇一摇，计步器等应用。小编近日闲着无聊，也开发出了一个摇一摇网页应用，感兴趣的小伙伴可亲身体验一下。扫码访问效果图技术解析(1)DeviceOrientationDeviceOrientation是HTML 5的重要特性之一，它将底层的方向传感器和运动传感器进行了高级封装，提供了对DOM两种事...
html5摇一摇
hejias的专栏
11-27 419
html5摇一摇   可以根据代码更改 --code----------- test var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff'); if(window.DeviceMotionEvent) { var speed
html5实现摇一摇功能
weixin_30614109的博客
12-03 93
原理：使用DeviceMotion实现，关于DeviceMotion介绍可以查看 https://developer.mozilla.org/en-US/docs/Web/Reference/Events/devicemotion 通过DeviceMotionEvent，可以获得accelerationIncludingGravity的x,y,z属性，根据x,y,z属性的变化来判断...
html实现摇一摇并震动
aiyaya2016的博客
10-12 214
　　今天收到了领导的通知，要APP和触屏完成摇一摇的功能，本来通过IOS调用原生还是蛮方便的，但想如果采用web前端的方式应该是实现不了的，马上就开始推脱了。可惜领导告知微信京东购物，不仅仅有摇一摇还有震动的功能，顿时就打脸了，下来后立即谷歌，查找代码写出demo，哈哈。 　　通过查找资料发现window.DeviceMotionEvent该事件可以监听设备的运动事件，然后通过even...
H5进阶篇--实现微信摇一摇功能
weixin_33670786的博客
09-15 209
在HTML5中，DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。而通过DeviceMotion对设备运动状态的判断，则可以帮助我们在网页上就实现“摇一摇”的交互效果...
如何通过c语音实现mq3传感器实测值和阈值的比较
07-11
### 回答1： 通过C语言实现MQ-3传感器实测值和阈值的比较可以按照以下步骤进行： 1. 首先，需要了解MQ-3传感器的工作原理和与单片机的连接方式。MQ-3传感器是一种酒精气体传感器，可以测量环境中的酒精浓度。通常，它会与单片机通过模拟输入引脚连接，将传感器输出的模拟电压值输入到单片机中进行处理。 2. 在C语言中，通过使用单片机的模拟输入功能，可以将MQ-3传感器的模拟输出值读取到单片机中。具体可以使用ADC（模拟数字转换器）模块进行模拟量的转换，并将转换后的数字值保存到相应的变量中。 3. 接下来，需要设置阈值变量，用于保存阈值数值。阈值可以根据实际需求进行设定，比如设置一个合适的酒精浓度阈值。 4. 在C语言中，可以使用条件语句（如if语句）来进行实测值和阈值的比较。将读取到的MQ-3传感器测量值与阈值进行比较，如果超过阈值，则可以执行相应的操作，比如触发报警器或者采取其他措施。 以上就是通过C语言实现MQ-3传感器实测值和阈值的比较的基本步骤。根据具体的开发平台和具体的需求，可能还需要对模拟输入的量进行适当的缩放或者数据处理，以及进一步的代码优化和功能扩展。 ### 回答2： 要通过C语言实现MQ3传感器实测值和阈值的比较，可以按照以下步骤： 1. 首先，需要连接MQ3传感器到单片机（如Arduino）上，并配置相应的引脚。 2. 在C语言中，可以使用串口通信来读取MQ3传感器的实测值。通过使用串口库函数（如`SerialRead()`）读取传感器返回的数据，并将其保存到一个变量中。 3. 设置阈值，可以通过使用一个变量来存储阈值。可以手动设置阈值，或者通过用户输入的方式设置阈值。 4. 将传感器实测值与阈值进行比较。可以使用条件语句（如`if`语句）来判断当前传感器值是否超过设定的阈值。例如，可以使用如下代码进行比较： ``` float measuredValue = //传感器实测值 float threshold = //设置的阈值 if(measuredValue > threshold) { printf("传感器值超过阈值\n"); } else { printf("传感器值未超过阈值\n"); } ``` 5. 根据比较结果进行相应的操作。根据实际需求，可以根据比较结果来触发一些事件或动作。例如，如果传感器值超过阈值，可以通过控制输出端口，使某个设备启动或者触发警报等。 通过上述步骤，就可以使用C语言来实现MQ3传感器实测值和阈值的比较，并根据比较结果进行相应的操作。需要根据具体的硬件平台和传感器库函数进行相应的代码实现，以实现具体的功能。 ### 回答3： 要通过C语言实现MQ3传感器实测值与阈值的比较，可以按照以下步骤进行： 1. 首先，通过相应的硬件接口将MQ3传感器与单片机连接。这可能需要使用模拟输入口或者I/O口。 2. 在C语言程序中，通过相应的库函数或者编写驱动程序来读取MQ3传感器的实测值。这可能涉及到模拟输入口的读取或者I/O口的状态检测。 3. 接下来，需要定义一个阈值，用于与传感器的实测值进行比较。阈值可以是一个固定的值，也可以根据实际需求进行动态调整。 4. 将传感器的实测值与阈值进行比较。可以使用条件判断语句，如if-else语句、switch语句等，来判断实测值是大于、小于还是等于阈值。 5. 根据比较结果进行相应的处理。比如，如果实测值大于阈值，则可以触发某种警报或者执行相应的动作；如果实测值小于阈值，则可以进行其他的处理；如果实测值等于阈值，则也可以进行相应的处理。 6. 在程序中不断循环，以使得传感器的实测值与阈值的比较可以持续进行。 需要注意的是，以上仅为一种基本的实现方式，具体的实现方法可能还与你所使用的单片机、传感器类型以及相关硬件环境等有关。因此，在实际操作中，可能需要参考相关的文档、手册或者资料来具体实施。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值