H5 étapes pour mettre en œuvre la fonction de tremblement du téléphone portable-tutoriel HTML-php.cn

H5 étapes pour mettre en œuvre la fonction de tremblement du téléphone portable

php中世界最好的语言

Libérer： 2017-12-04 11:15:10

original

3907 Les gens l'ont consulté

Aujourd'hui, je vais vous apprendre à utiliser HTML5 pour implémenter une fonction très intéressante sur la page Web. Secouez simplement votre téléphone. Si vous avez déjà fait du développement mobile, vous connaissez peut-être très bien ces fonctions. Mais ci-dessous, nous implémenterons cette fonctionnalité pour la première fois sur le Web.

OrientationÉvénementdeviceorientation

Cet événement est déclenché lorsque l'orientation de l'appareil change La méthode d'utilisation est la suivante :

window.addEventListener('deviceorientation. ', orientationHandler , true);

Fonction de rappelorientationHandler recevra un paramètre de type DeviceOrientationEvent, comprenant les informations suivantes.

AttributNom Description

absolu Si les données de direction sont différentes du système de coordonnées terrestres et du système de coordonnées de l'appareil, elles sont vraies

alpha L'angle de rotation de l'appareil dans la direction alpha, allant de 0 à 360

appareil bêta dans l'angle de rotation dans la direction bêta, allant de -180 à 180

gamma L'angle de rotation de l'appareil dans la direction gamma, allant de -90 à 90

Événement de mouvement devicemotion

Cet événement est déclenché lorsque la position de l'appareil change

window.addEventListener('devicemotion', motionHandler, false);

Ce rappel La fonction acceptera les paramètres de type DeviceMotionEvent, y compris les informations suivantes.

Description du nom de l'attribut

accélération La distance parcourue par l'appareil dans les directions des axes X, Y et Z pour compenser l'accélération de la gravité

accelerationIncludingGravity La distance parcourue par l'appareil dans les trois directions X, Y et Z La distance parcourue dans la direction de l'axe, y compris l'accélération de la gravité

rotationRate L'angle de rotation de l'appareil dans les trois directions Alpha, Beta et Gamma

intervalle La fréquence d'obtention des données de l'appareil, en millisecondes

Partie code

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>摇一摇</title>
</head>
<body>
  <p>
    摇一摇
  </p>
  <script>
    const SHAKE_SPEED = 300;
    let lastTime = 0;//上次变化的时间
    let x = y = z = lastX = lastY = lastZ = 0;//位置变量初始化
 
    function  motionHandler(event) {
      let acceleration = event.accelerationIncludingGravity;
      let curTime = Date.now();//取得当前时间
      if ((curTime - lastTime) > 120) {
        let diffTime = curTime - lastTime;
        lastTime = curTime;
        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;
        //计算摇动速度
        let speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 1000;
        if (speed > SHAKE_SPEED) {
          alert("你摇动了手机");
        }
        lastX = x;
        lastY = y;
        lastZ = z;
      }
    }
    if(window.DeviceMotionEvent) {
      window.addEventListener(&#39;devicemotion&#39;, motionHandler, false);
    } else {
      alert("你的设备不支持位置感应");
    }
  </script>
</body>
</html>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour un contenu plus passionnant, veuillez prêter attention aux articles liés au site Web chinois phpAutres !

Lecture connexe :

Étapes pour implémenter la programmation DOM en HTML5

Comment utiliser les événements en HTML

Utilisez Canvas pour effectuer les étapes de mise en œuvre de l'horloge

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!