Maison > Article > interface Web > H5 étapes pour mettre en œuvre la fonction de tremblement du téléphone portable
H5 étapes pour mettre en œuvre la fonction de tremblement du téléphone portable
- php中世界最好的语言original
- 2017-12-04 11:15:103837parcourir
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('devicemotion', motionHandler, false);
} else {
alert("你的设备不支持位置感应");
}
</script>
</body>
</html>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!