利用html5实现类似微信的手机摇一摇功能
利用html5实现类似微信的手机摇一摇功能,并播放音乐。
1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。
2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
不多说直接上代码,
Javascript:
- var SHAKE_THRESHOLD = 3000;
- var last_update = 0;
- 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) {
- 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:
- <!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 οnlοad="init()">
- <p>用力摇一摇你手机</p>
- <audio style="display:hiden" id="musicBox" preload="metadata" controls src="http://211.148.5.228:8002/Pages/test/Kalimba.mp3" autoplay="false">
- </audio>
- </body>
- </html>
IOS 测试:Safari 弹框\不播放音乐, Chroma 弹框\不播放音乐,UC弹框\不播放音乐
Andriod 测试:UC弹框\播放音乐,Chroma 弹框\播放音乐,内置浏览器 弹框\播放音乐
转载于:https://www.cnblogs.com/lucaryoung/p/4506421.html
利用html5实现类似微信的手机摇一摇功能相关推荐
- 利用html5实现类似微信的手机摇一摇功能-计算摇动次数
1. deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2. deviceMotion:封装了运动传感器数据的事件 ...
- 摇一摇抽奖 php,利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖
摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下:if (win ...
- 苹果手机html5摇一摇游戏戏码,利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖,html5devicemotion...
利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖,html5devicemotion 摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的 ...
- 类似微信,微博,QQ的头像截图功能, 图片支持缩放
类似微信,微博,QQ的头像截图功能, 图片支持缩放, 不多说了, 直接上源码! http://pan.baidu.com/s/1gdJxb03
- 利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖
摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (wi ...
- html5 手机随机抽奖,利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖
1 2 3 4 5 6 摇一摇抽奖 7 8 html,body{width:100%;height:100%;background-color:#000;margin:0;overflow:hidde ...
- 小程序学习日记-微信7-摇手机抖一抖功能模拟
微信提供的陀螺仪相关方法 提供的方法: 陀螺仪方法: wx.startGyroscope(Object object):开启陀螺仪监控 wx.stopGyroscope(Object object): ...
- Html5手机微信摇一摇
<?php /*** Created by JetBrains PhpStorm.* User: 张华* Date: 16-3-4* Time: 上午11:29* To change this ...
- 用HTML5实现手机摇一摇的功能并配上声音
一.用HTML5实现手机摇一摇的功能并配上声音 HTML5的一个重要特性:DeviceOrientation,他将底层的方向传感器和运动传感器进行了高级封装,提供DOM事件支持. DeviceOrie ...
最新文章
- mysql 事务 返回插入的值_Mysql同一个事务内记录成功插入后查询不出来
- wpf 加载资源html,从资源文件加载WPF样式
- boost::math模块计算 Bessel、Neumann 和 Airy 函数的零点的测试程序
- linux终端vim底行模式点冒号,Vim基本使用方法
- hosts 文件与 ipv6
- linq to json for sl
- UWP开发入门(十一)——Attached Property的简单应用
- Linux搭建svn服务
- linux generic什么意思_如何在 Ubuntu 中修复 VirtualBox 的 “rc=1908” 错误 | Linux 中国...
- Uni2D Unity4.3 2D Skeletal Animation
- 大数据之Oozie——源码分析(一)程序入口
- windows xp下安装java8(jdk8)-转
- C#图解教程读书笔记(深入理解类)
- 国军标gjb150a振动冲击试验标准
- (JavaScript案例)可拖动的模态框
- 程序员打新总结 6月份 新股申购秘籍
- Appium+python自动化(六)- 连接模拟器并启动淘宝APP(超详解)
- mysql out of range,mysql保存数据提示:Out of range value for column错误
- 滚动轴承故障检测与诊断(一)
- buffer几种用法
热门文章
- java 实现 按位异或_转:[Java] 深入理解按位异或运算符
- jQuery日历插件酒店预订蓝色
- Spring AOP代码实现:实例演示与注解全解
- CAN总线高仿CANoe界面上位机-二更
- webLogic内存溢出解决方案
- 借助江苏电信欢go进行流量推广活动合作的工作规范(二)
- 微信测试公众号基本配置URL和Token的验证-JAVA
- mysql mediumint是什么类型_MySQL中数值类型中smallint、mediumint等区别是什么 - 晓雨网...
- Android动态屏蔽IP地址
- 【超详细】支持向量机(SVM)数学推导