HTML5 DeviceOrientation完成手机上网站摇1摇作用编码

日期:2020-12-11 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

详细介绍以前做两个申明:

下列编码能够立即运作,自然你别忘了引入jQuery才行。

拷贝编码
编码以下:

<script>
// DeviceOrientation将最底层的方位感应器和健身运动感应器开展了高級封裝,出示了DOM恶性事件的适用。
// 这个特点包含两个恶性事件:
// 1、deviceOrientation:封裝了方位感应器数据信息的恶性事件,能够获得手机上静止不动情况下的方位数据信息(手机上所处的角度、方向和房屋朝向等)。
// 2、deviceMotion:封裝了健身运动感应器的恶性事件,能够获得手机上健身运动情况下的健身运动加快度等数据信息。
// 应用这两个恶性事件,能够很可以完成重力感应、指南针等趣味的作用。</p> <p>// 如今在许多Native运用中有1个十分普遍而时尚潮流的作用 —— 摇1摇,摇1摇找人、摇1摇看新闻、摇1摇找金币。。。
// 或许在android或ios的顾客端上对这个作用你早已很掌握了,可是如今,我将告知你怎样在手机上网页页面上完成摇1摇的作用。</p> <p>// OK,那大家如今就刚开始吧,嘿嘿~
// 先来让大家掌握1下机器设备健身运动恶性事件 —— DeviceMotionEvent:回到机器设备有关加快度和转动的有关信息内容,在其中加快度的数据信息包括下列3个方位:
// x:横向贯穿手机上显示屏;
// y:纵向贯穿手机上显示屏;
// z:竖直手机上显示屏。
// 鉴于一些机器设备沒有清除重力的危害,因此该恶性事件会回到两个特性:
// 1、accelerationIncludingGravity(含重力的加快度)
// 2、acceleration(清除重力危害的加快度)</p> <p>// 做为码农,上编码才是最立即的,come on,编码走起!</p> <p>// 最先在网页页面上要监视健身运动传感恶性事件
function init(){
  if (window.DeviceMotionEvent) {
    // 挪动访问器适用健身运动传感恶性事件
    window.addEventListener('devicemotion', deviceMotionHandler, false);
    $("#yaoyiyaoyes").show();
  } else{
    // 挪动访问器不适用健身运动传感恶性事件
    $("#yaoyiyaono").show();
  }
}</p> <p>// 那末,大家怎样测算客户是不是是在摇晃手机上呢?能够从下列几点开展考虑到:
// 1、实际上客户在摇晃手机上的情况下自始至终全是以1个方位为主开展摇晃的;
// 2、客户在摇晃手机上的情况下在x、y、z3个方位都会有相应的想速率的转变;
// 3、不可以把客户一切正常的手机上健身运动个人行为作为摇1摇(手机上放在兜里,走路的情况下也会有加快度的转变)。
// 从以上3点考虑到,对于3个方位上的加快度开展测算,间距精确测量她们,调查她们在固定不动時间段里的转变率,并且必须明确1个阈值来开启摇1摇以后的实际操作。</p> <p>// 最先,界定1个摇晃的阈值
var SHAKE_THRESHOLD = 3000;
// 界定1个自变量储存之前升级的時间
var last_update = 0;
// 紧接着界定x、y、z纪录3个轴的数据信息和上1次考虑的時间
var x;
var y;
var z;
var last_x;
var last_y;
var last_z;</p> <p>// 以便提升这个事例的1点无聊趣味性性,提升1个计数器
var count = 0;</p> <p>function deviceMotionHandler(eventData) {
  // 获得含重力的加快度
  var acceleration = eventData.accelerationIncludingGravity; </p> <p>  // 获得当今時间
  var curTime = new Date().getTime();
  var diffTime = curTime -last_update;
  // 固定不动時间段
  if (diffTime > 100) {
    last_update = curTime; </p> <p>    x = acceleration.x;
    y = acceleration.y;
    z = acceleration.z; </p> <p>    var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; </p> <p>    if (speed > SHAKE_THRESHOLD) {
      // TODO:在此处能够完成摇1摇以后所要开展的数据信息逻辑性实际操作
      count++;
      $("#yaoyiyaoyes").hide();
      $("#yaoyiyaoresult").show();
      $("#yaoyiyaoresult").html("摇你妹!第" + count + "个了!");
    }</p> <p>    last_x = x;
    last_y = y;
    last_z = z;
  }
}
</script>
<div id="yaoyiyaono" style="font-size:20px;margin:10px;line-height:35px;display:none;">
  弟兄,假如您看到了我,表明您如今还不可以摇,并不是说您沒有资质用我,而是:</br>
  1、假如您应用PC机的访问器,那可就不对了,我只爱手机上访问器;</br>
  2、假如您是Android手机上,那不太好意思告知你,android自带的访问器抛下了我,您能够用UCWeb、chrome等第3方访问器;</br>
  3、假如您都不属于以上两种状况,那我仅有告知您:您更换手机上啦!!!</br>
</div>
<div id="yaoyiyaoyes" style="font-size:20px;margin:10px;line-height:50px;display:none;">
  弟兄,摇1个吧,说不确定有1个甜美的妹子等着你呢!
</div>
<div id="yaoyiyaoresult" style="font-size:20px;margin:10px;line-height:50px;display:none;"></div>
<script>
$(document).ready(function(){
init();
});
</script>