js html5 仿微信摇一摇怎么控制触发时间

发布网友发布时间：2022-05-02 17:34

共3个回答

懂视网时间：2022-05-12 05:09

原理：使用DeviceMotion实现，关于DeviceMotion介绍可以查看
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/devicemotion

通过DeviceMotionEvent，可以获得accelerationIncludingGravity的x,y,z属性，根据x,y,z属性的变化来判断设备是否有摇一摇的事件发生。

accelerationIncludeingGravity说明：
The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don’t have a gyroscope to allow them to properly remove gravity from the data.

代码如下：

<!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实现摇一摇的功能，更多相关内容请关注Gxl网。

相关推荐：

如何通过MySql查看与修改auto_increment的方法

如何通过php生成网页桌面的快捷方式

利用js遍历获取表格内数据的方法

热心网友时间：2022-05-12 02:17

HTML5 有很多强大的功能，比如获取设备的 x y z 坐标。这些值都可以通过代码获取并呈现出来。
也可以计算加速度及设备移动的方向，不知未来还会有多强大！
也不知什么机会看到了摇一摇，网页版本的。从网上看了一下，编写了一个代码，测试成功，贴出来。
可以后期加上很多功能，比如做个音乐播放器，或者内嵌到自己个性博客中等等。
下面是HTML源代码，
//Javascript
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) {
alert("摇动了，播放");
var media=document.getElementByIdx_x("musicBox");//获取音频控件
media.setAttribute("src","http://1.html5weby1y.sinaapp.com/2.mp3");
media.load();//加载音频
media.play();//播放音频
}
last_x = x;
last_y = y;
last_z = z;
}
}
html body onload="init()"
\
用力摇一摇你手机\

\

热心网友时间：2022-05-12 03:35

settimeout

js html5 仿微信摇一摇 怎么控制触发时间

js html5 仿微信摇一摇怎么控制触发时间