基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)


Posted in HTML / CSS onJuly 24, 2017

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

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

不多说直接上代码:

JavaScript:

var jsonObject=null;
        // 当页面加载完以后会执行window.onload
        window.onload = function() {
            var times = -1; // 记录摇动次数
            var last_time = 0;
            var borderSpeed = 800;  // 加速度变化临界值
            var x = y = z = last_x = last_y = last_z = 0;
            if (window.DeviceMotionEvent) {
                window.addEventListener('devicemotion',shake,false);
            }
            else
            {
                alert('您的设备不支持摇一摇哦');
            }
            // 每次手机移动的时候都会执行下面shake函数的代码
            function shake(eventData)
            {
                var acceleration = eventData.accelerationIncludingGravity;
                var curTime = new Date().getTime();
                var diffTime  = curTime-last_time;
                // 每隔100ms进行判断
                if (diffTime>100) {
                    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>borderSpeed) {
                        times++;
                        document.getElementById("text").innerHTML=times+" times";
                        // 用户的微信昵称和头像连接发送一次即可,不需要每次都发送
                        if (times==0)
                        {
                            document.forms["insertForm"].headimg.value =img ;
                            document.forms["insertForm"].user.value = nickname;
                        }
                        document.forms["insertForm"].time.value = times;
                    }
                    last_time = curTime;
                    last_x = x;
                    last_y = y;
                    last_z = z;
                }
            }
        }

html:

<img src="hand.png">
<br/><font size="16" color="red" id="text"></font>

总结

以上所述是小编给大家介绍的基于HTML5实现类似微信手机摇一摇功能(计算摇动次数),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
CSS3教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 #HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 #HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 #HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 #HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 #HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 #HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 #HTML / CSS
You might like
PHP二维数组的去重问题解析
2011/07/17 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
jquery简单体验
2007/01/10 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
Python栈类实例分析
2015/06/15 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
详解Python import方法引入模块的实例
2017/08/02 Python
python模块smtplib学习
2018/05/22 Python
python保存数据到本地文件的方法
2018/06/23 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python装饰器语法糖
2019/01/02 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
高中生个性发展自我评价
2015/03/09 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL