2 guyuegongsui guyuegongsui 于 2016.02.22 11:33 提问

js 手机网页端摇一摇记录摇动次数 5C

在网页上设置监听判断手机是否摇动,为什么有的时候摇动手机能够监测到摇动,有的时候就不能监测到摇动,感觉手机网页卡掉了一样,代码还是一样的代码啊,请问这应该怎么优化啊

 <!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style>body{text-align:center} </style>
  <script type="text/javascript" src="jquery-1.7.min.js"> </script>
  <script type="text/javascript">

     var jsonObject=null;

    (function() {
        // 获取微信用户名
        WgateJs = {};
      WgateJs.auto_auth=true;
      WgateJs.gate_options={force:1,info:"basic"};
      WgateJs.ready=function(){
      var wgateid=WgateJs.getWgateid();
      WgateJs.getWgateUser(function(user){
        jsonObject=user;
        });
      }   
      var u=(("https:" == document.location.protocol) ? "https" : "http") + "://st.weixingate.com/";
      u=u+'st/2016';
      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
      g.type='text/javascript';
      g.defer=true;
      g.async=true;
      g.src=u;
      s.parentNode.insertBefore(g,s);
      })();

    // 当页面加载完以后会执行window.onload
  window.onload = function() {

    var nickname = jsonObject.nickname; // 得到微信用户昵称
    var img = jsonObject.headimgurl; // 得到微信头像url
    var times = -1; // 记录摇动次数
    var last_time = 0;
    var borderSpeed = 500;  // 加速度变化临界值
    var x = y = z = last_x = last_y = last_z = 0;
    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion',shake,false);
        }
        else
            {
             alert('not support mobile event');
            }

      // 每次手机移动的时候都会执行下面shake函数的代码
  function shake(eventData)
  {
    var acceleration = eventData.accelerationIncludingGravity;
    var curTime = new Date().getTime();
    var diffTime  = curTime-last_time;

    // 每隔100ms进行判断
    if (diffTime>100) {
      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>borderSpeed) {
          times++;
          document.getElementById("text").innerHTML="you have shaked "+times+" times";

          // 用户的微信昵称和头像连接发送一次即可,不需要每次都发送
          if (times==0) 
          {
            document.forms["insertForm"].headimg.value =img ;
            document.forms["insertForm"].user.value = nickname;
          }

              document.forms["insertForm"].time.value = times;
          doSend();
    }
        last_time = curTime;
        last_x = x;
        last_y = y;
        last_z = z;
}
}
}

    function doSend()
    {
        $.ajax({
            cache: false,
            type: "POST",
            url:"get.jsp",   
            data:$('#ajaxFrm').serialize(),  
            async: false,
            error: function(request) {

            },
            success: function(data) {

            }
        });
    }

</script>
</head>
<body>
  <img src="/images/hand.png" width="600" height="600">
  <br/><font size="16" color="red" id="text">shake your phone</font>
  <form id="ajaxFrm" name="insertForm">
  <input type="hidden" name="user" value="">
  <input type="hidden" name="time" value="0">
  <input type="hidden" name="headimg" value="">
  </form>

</body>
</html>

1个回答

zz202328
zz202328   2016.02.23 01:20

没有代码(>﹏<)怎么回答图片说明

guyuegongsui
guyuegongsui 我新加入了代码,能帮忙看一下吗
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!