基于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 相关文章推荐
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
CSS3教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 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
Yii2数据库操作常用方法小结
2017/05/04 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
Node.js实现数据推送
2016/04/14 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
React实现全选功能
2020/08/25 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中的相关分析correlation analysis的实现
2019/08/29 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
.NET初级开发工程师面试题
2014/04/18 面试题
家长评语大全
2014/01/22 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
英文版辞职信
2015/02/28 职场文书
青春雷锋观后感
2015/06/10 职场文书
基石观后感
2015/06/12 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
Python如何加载模型并查看网络
2022/07/15 Python