H5做出手機(jī)搖一搖技巧的完成步驟
發(fā)表時(shí)間：2023-12-24 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]今天教大家用HTML5來(lái)在網(wǎng)頁(yè)里實(shí)現(xiàn)一個(gè)很炫酷的功能，手機(jī)搖一搖。如果你之前做過(guò)手機(jī)端的開(kāi)發(fā)，可能對(duì)于這樣的功能非常了解。但是下面，我們將在Web上首次實(shí)現(xiàn)這個(gè)功能。方向事件deviceorientation該事件實(shí)在設(shè)備方向發(fā)生變化時(shí)觸發(fā), 使用方法如下;window.addEventListe...
今天教大家用HTML5來(lái)在網(wǎng)頁(yè)里實(shí)現(xiàn)一個(gè)很炫酷的功能，手機(jī)搖一搖。如果你之前做過(guò)手機(jī)端的開(kāi)發(fā)，可能對(duì)于這樣的功能非常了解。但是下面，我們將在Web上首次實(shí)現(xiàn)這個(gè)功能。
方向事件deviceorientation
該事件實(shí)在設(shè)備方向發(fā)生變化時(shí)觸發(fā), 使用方法如下;
window.addEventListener('deviceorientation', orientationHandler, true);
回調(diào)函數(shù)orientationHandler會(huì)接收到一個(gè)DeviceOrientationEvent類(lèi)型參數(shù), 包含以下信息.
屬性名 說(shuō)明
absolute 如果方向數(shù)據(jù)跟地球坐標(biāo)系和設(shè)備坐標(biāo)系有差異, 則為true
alpha 設(shè)備在alpha方向上旋轉(zhuǎn)的角度, 范圍為0-360
beta 設(shè)備在Beta方向上旋轉(zhuǎn)的角度, 范圍為-180-180
gamma 設(shè)備在Gamma方向上旋轉(zhuǎn)的角度, 范圍為-90-90
移動(dòng)事件devicemotion
該事件實(shí)在設(shè)備位置發(fā)生變化時(shí)觸發(fā)
window.addEventListener('devicemotion', motionHandler, false);
該回調(diào)函數(shù)會(huì)接受DeviceMotionEvent類(lèi)型參數(shù), 包含以下信息.
屬性名 說(shuō)明
acceleration 設(shè)備在X,Y,Z三個(gè)軸的方向上移動(dòng)的距離, 以抵消重力加速度
accelerationIncludingGravity 設(shè)備在X,Y,Z三個(gè)軸方向移動(dòng)的距離, 包含重力加速度
rotationRate 設(shè)備在Alpha, Beta, Gamma三個(gè)方向旋轉(zhuǎn)的角度
interval 從設(shè)備獲取數(shù)據(jù)的頻率, 單位是毫秒
代碼部分
<!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;//上次變化的時(shí)間
let x = y = z = lastX = lastY = lastZ = 0;//位置變量初始化
function motionHandler(event) {
let acceleration = event.accelerationIncludingGravity;
let curTime = Date.now();//取得當(dāng)前時(shí)間
if ((curTime - lastTime) > 120) {
let diffTime = curTime - lastTime;
lastTime = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
//計(jì)算搖動(dòng)速度
let speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 1000;
if (speed > SHAKE_SPEED) {
alert("你搖動(dòng)了手機(jī)");
}
lastX = x;
lastY = y;
lastZ = z;
}
}
if(window.DeviceMotionEvent) {
window.addEventListener('devicemotion', motionHandler, false);
} else {
alert("你的設(shè)備不支持位置感應(yīng)");
}
</script>
</body>
</html>
相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
html5中的DOM編程的實(shí)現(xiàn)步驟
HTML里的事件怎么使用
用canvas做出時(shí)鐘實(shí)現(xiàn)步驟
以上就是H5做出手機(jī)搖一搖功能的實(shí)現(xiàn)步驟的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
