Maison > Article > interface Web > Comment implémenter la fonction shake via HTML5
Comment implémenter la fonction shake via HTML5
- jackloveoriginal
- 2018-06-09 10:04:082585parcourir
Principe : Utilisez DeviceMotion pour implémenter. Pour une introduction à DeviceMotion, vous pouvez consulter
https://developer.mozilla.org/en-US/docs/. Web/Reference/Events /devicemotion
Grâce à DeviceMotionEvent, vous pouvez obtenir les attributs x, y, z de accelerationIncludingGravity et déterminer si l'appareil est secoué en fonction de les changements dans les attributs x, y, z. L'événement de secousse s'est produit.
accelerationIncludeingGravity description :
L'accélération de l'appareil inclut l'effet de la gravité et peut être la seule valeur disponible sur les appareils qui n'ont pas de gyroscope à autoriser. pour supprimer correctement la gravité des données.
Le code est le suivant :
<!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>Cet article présente la fonction de secouer via html5 pour un contenu plus connexe. , veuillez suivre le site Web chinois php.
Recommandations associées :
Comment afficher et modifier l'auto_increment via MySql
Comment générer un raccourci sur le bureau Web via php Méthode
Utiliser js traversal pour obtenir des données dans le tableau
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!