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

时间2024-01-23 11:58:25发布访客分类HTML浏览396

导读：收集整理的这篇文章主要介绍了如何通过html5实现摇一摇的功能，觉得挺不错的，现在分享给大家，也给大家做个参考。原理：使用DeviceMotion实现，关于DeviceMotion介绍可以查看 https://develoPEr.mozil...

收集整理的这篇文章主要介绍了如何通过html5实现摇一摇的功能，觉得挺不错的，现在分享给大家，也给大家做个参考。原理：使用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.

代码如下：

!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实现摇一摇的功能，更多相关内容请关注。