How to implement the shake function through html5-H5 Tutorial-php.cn

How to implement the shake function through html5

jacklove

Release： 2018-06-09 10:04:08

Original

2686 people have browsed it

Principle: Use DeviceMotion to implement. For an introduction to DeviceMotion, you can view
https://developer.mozilla.org/en-US/docs/Web/Reference/Events /devicemotion

Through DeviceMotionEvent, you can get the x, y, and z attributes of accelerationIncludingGravity, and determine whether the device has shaken based on the changes in the x, y, and z attributes. The shaking event occurred.

accelerationIncludeingGravity description:
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.

The code is as follows:

<!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(&#39;mybody&#39;).className = &#39;doing&#39;;
        document.getElementById(&#39;txt&#39;).innerHTML = &#39;执行了摇一摇&#39;;
        setTimeout(function(){
            doing=0; 
            document.getElementById(&#39;mybody&#39;).className=&#39;normal&#39;;
            document.getElementById(&#39;txt&#39;).innerHTML = &#39;请执行摇一摇&#39;;
        },3000);
    }
    window.addEventListener("devicemotion", handleMotionEvent, true); </script></html>

Copy after login

This article introduces the function of shaking through html5. For more related content, please pay attention to php Chinese website.

Related recommendations:

How to view and modify auto_increment through MySql

##How to generate a web desktop shortcut through php Method

Use js traversal to obtain data in the table

The above is the detailed content of How to implement the shake function through html5. For more information, please follow other related articles on the PHP Chinese website!