如何通过html5实现摇一摇的功能


本文摘自PHP中文网,作者jacklove,侵删。

原理:使用DeviceMotion实现,关于DeviceMotion介绍可以查看
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/devicemotion

通过DeviceMotionEvent,可以获得accelerationIncludingGravity的x,y,z属性,根据x,y,z属性的变化来判断设备是否有摇一摇的事件发生。

accelerationIncludeingGravity说明:
The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don’t have a gyroscope to allow them to properly remove gravity from the data.

代码如下:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>

 <head>

  <meta http-equiv="content-type" content="text/html;charset=utf-8">   

  <title> html5使用DeviceMotionEvent实现摇一摇 </title>

  <style type="text/css">

  .center{position:absolute; width:640px; height:480px; left:50%; top:50%; margin-left:-320px; margin-top:-240px; line-height:480px; text-align:center; font-size:100px; }

  .normal{background:#000000;}

  .normal .txt{color:#FFFFFF;}

  .doing{background:#FF0000;}

  .doing .txt{color:#FFFF00;}

  </style>

 </head>

 <body id="mybody" class="normal">

    <p id="txt" class="txt center">请执行摇一摇</p>

 </body>

 <script type="text/javascript">

    var doing = 0;  // 判断是否在动画显示中

    var speed = 23; // 定义摇动的速度数值

    var lastx = 0;    var lasty = 0;    var lastz = 0;    function handleMotionEvent(event) {

        var x = event.accelerationIncludingGravity.x;        var y = event.accelerationIncludingGravity.y;        var z = event.accelerationIncludingGravity.z;        if(doing==0){            if(Math.abs(x-lastx)>speed || Math.abs(y-lasty)>speed){

                doing = 1;

                show();

            }

        }

        lastx = x;

        lasty = y;

        lastz = z;

    }    function show(){

        document.getElementById('mybody').className = 'doing';

        document.getElementById('txt').innerHTML = '执行了摇一摇';

        setTimeout(function(){

            doing=0;

            document.getElementById('mybody').className='normal';

            document.getElementById('txt').innerHTML = '请执行摇一摇';

        },3000);

    }

    window.addEventListener("devicemotion", handleMotionEvent, true); </script></html>

本文介绍了通过html5实现摇一摇的功能,更多相关内容请关注php中文网。

相关推荐:

如何通过MySql查看与修改auto_increment的方法

如何通过php生成网页桌面的快捷方式

利用js遍历获取表格内数据的方法

以上就是如何通过html5实现摇一摇的功能的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

h5 canvas中fill 与stroke文字效果实现实例

总结HTML5的新特性(面试必备)

详解HTML5地理定位与第三方工具百度地图的应用

如何使用HTML5 canvas实现图像的马赛克

HTML5无插件多媒体media-音频audio与视频video的详细介绍

h5表单验证失败该怎样提示

h5计算手机摇动次数

HTML5实现如何在两个div元素之间拖放图像

HTML5程序员需要学习的技能总结

介绍HTML5+canvas调用手机拍照功能实现图片上传(下篇)

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




打赏

取消

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

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

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

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

评论

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