H5计算手机摇动次数


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来H5计算手机摇动次数H5计算手机摇动次数的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

不多说直接上代码:

JavaScript:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

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:

1

2

<img src="hand.png">

<br/><font size="16" color="red" id="text"></font>

阅读剩余部分

相关阅读 >>

介绍下HTML5.1里的新内容

HTML5的深入了解

如何获取微信小程序登录的session?(详细)

利用HTML5实现文件异步上传功能代码实例

h5的之sse服务器发送事件eventsource详解

基于HTML5的web scada报表图文代码详解

HTML5怎么禁止横屏

canvas原生实现前端网页移动端签名

(server-sent events)浅谈h5 中的服务器推送事件

HTML5规定在拖动被拖动数据时是否进行复制移动或链接的属性dropzone

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...