ホームページ > 記事 > ウェブフロントエンド > html5でシェイク機能を実装する方法
html5でシェイク機能を実装する方法
- jackloveオリジナル
- 2018-06-09 10:04:082653ブラウズ
原則: DeviceMotion を使用して実装します。DeviceMotion の概要については、https://developer.mozilla.org/en-US/docs/Web/Reference/Events/devicemotion を参照してください。
から
加速度を含む重力 の x、y、および z 属性は、x、y、および z 属性の変化に基づいてデバイス上で振動イベントが発生するかどうかを判断するために使用されます。 重力を含む加速度の説明:
この値には重力の影響が含まれており、データから重力を適切に除去できるジャイロスコープを備えていないデバイスで使用できる唯一の値である可能性があります。 コードは次のとおりです:
<!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 によるシェイク機能を紹介します。関連コンテンツの詳細については、PHP 中国語 Web サイトを参照してください。 関連する推奨事項:
MySql を使用して auto_increment を表示および変更する方法 php を使用して Web デスクトップへのショートカットを生成する方法
js トラバーサルを使用してテーブル内のデータを取得する方法
以上がhtml5でシェイク機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。