利用html5实现类似微信的手机摇一摇功能，并播放音乐。
1、 deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。
2、 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。
js如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<scirpt>
var
SHAKE_THRESHOLD = 3000;
var
last_update = 0;
var
x = y = z = last_x = last_y = last_z = 0;
function
init() {
if
(window.DeviceMotionEvent) {
window.addEventListener(
'devicemotion'
, deviceMotionHandler,
false
);
}
else
{
alert(
'not support mobile event'
);
}
}
function
deviceMotionHandler(eventData) {
var
acceleration = eventData.accelerationIncludingGravity;
var
curTime =
new
Date().getTime();
if
((curTime - last_update) > 100) {
var
diffTime = curTime - last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var
speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
if
(speed > SHAKE_THRESHOLD) {
//一检测到摇动了，就5秒后跳转（此期间播放摇一摇的声音）
alert(
"摇动了"
);
media.setAttribute(
"src"
,
"http://dx.sc.chinaz.com/files/download/sound1/201410/5018.wav"
);
media.load();
media.play();
setTimeout(
function
(){location.href=
'http://www.baidu.com'
;},5000);}
}
last_x = x;
last_y = y;
last_z = z;
}
}
</script>
|
html5页面如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>HTML5实现手机摇一摇的功能</
title
>
<
meta
content
=
"text/html; charset=utf-8"
http-equiv
=
"Content-Type"
/>
<
meta
name
=
"Keywords"
content
=
""
/>
<
meta
name
=
"Description"
content
=
""
/>
<
meta
name
=
"viewport"
content
=
"initial-scale=1.0, user-scalable=no"
/>
<!-- Mobile Devices Support @begin -->
<
meta
content
=
"application/xhtml+xml;charset=UTF-8"
http-equiv
=
"Content-Type"
>
<
meta
content
=
"no-cache,must-revalidate"
http-equiv
=
"Cache-Control"
>
<
meta
content
=
"no-cache"
http-equiv
=
"pragma"
>
<
meta
content
=
"0"
http-equiv
=
"expires"
>
<
meta
content
=
"telephone=no, address=no"
name
=
"format-detection"
>
<
meta
content
=
"width=device-width, initial-scale=1.0"
name
=
"viewport"
>
<
meta
name
=
"apple-mobile-web-app-capable"
content
=
"yes"
/>
<!-- apple devices fullscreen -->
<
meta
name
=
"apple-mobile-web-app-status-bar-style"
content
=
"black-translucent"
/>
<!-- Mobile Devices Support @end -->
<
meta
content
=
"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
name
=
"viewport"
>
<
link
rel
=
"shortcut icon"
href
=
"favicon.ico"
/>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/style.css"
media
=
"all"
/>
<
script
src
=
"js/jquery-1.8.2.min.js"
type
=
"text/javascript"
></
script
>
</
head
>
<
body
onLoad
=
"init()"
>
<
img
src
=
"images/bg.jpg"
width
=
"99%"
>
</
body
>
</
html
>
|
在手机上试试....
OR
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
title
>摇一摇功能</
title
>
<
script
type
=
"text/javascript"
>
//Javascript
</
script
>
</
head
>
<
body
onLoad
=
"init()"
>
<
p
>用力摇一摇你手机</
p
>
<
audio
src
=
"1.mp3"
controls
=
"controls"
loop
id
=
"audioBtn"
style
=
"display:none;opacity:0; height:0px; width:0px;"
></
audio
>
</
body
>
</
html
>
<
script
>
var SHAKE_THRESHOLD = 3000;
var last_update = 0;
var x = y = z = last_x = last_y = last_z = 0;
function init() {
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('not support mobile event');
}
}
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update) > 50) {
var diffTime = curTime - last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
if (speed > SHAKE_THRESHOLD) {
document.getElementById('audioBtn').play();
setTimeout(function(){location.href='http://www.qq.com';},5000);
}
last_x = x;
last_y = y;
last_z = z;
}
}
</
script
>
|
本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/1665074，如需转载请自行联系原作者
