微信企业号开发:微信考勤摇一摇考勤

最新推荐文章于 2020-12-22 19:45:51 发布

mayonglong8

最新推荐文章于 2020-12-22 19:45:51 发布

阅读量2.4k

点赞数 1

文章标签：微信开发

摇一摇其实就是相当于点击了保存按钮而已。

其实获取地理位置HTML5也支持。

HTML5 - 使用地理定位

[javascript]view plaincopy 
   
 <script>  
 var x=document.getElementById("demo");  
 function getLocation()  
   {  
   if (navigator.geolocation)  
     {  
     navigator.geolocation.getCurrentPosition(showPosition);  
     }  
   else{x.innerHTML="Geolocation is not supported by this browser.";}  
   }  
 function showPosition(position)  
   {  
   x.innerHTML="Latitude: " + position.coords.latitude +  
   "<br />Longitude: " + position.coords.longitude;  
   }  
 </script>  

摇一摇的核心代码：

[javascript]view plaincopy 
   
 /需要判断浏览器是否支持    
              if (window.DeviceMotionEvent) {  
                  window.addEventListener('devicemotion', deviceMotionHandler, false);  
              } else {  
                  $("#shake").html('您的手机现在还不支持摇一摇功能。');  
              }  
               function deviceMotionHandler(eventData) {  
              var acceleration = eventData.accelerationIncludingGravity;  
              var curTime = new Date().getTime(); //获取当前时间戳  
              var diffTime = curTime - last_update;  
              if (diffTime > 100) {  
                  last_update = curTime; //记录上一次摇动的时间  
                  x = acceleration.x; //获取加速度X方向  
                  y = acceleration.y; //获取加速度Y方向  
                  z = acceleration.z; //获取加速度垂直方向  
                  var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; //计算阈值  
                  if (speed > SHAKE_THRESHOLD) {  
                      btnSave();  
                  }  
              }  
              //记录上一次加速度  
              last_x = x;  
              last_y = y;  
              last_z = z;  
          }  

完整的摇一摇考勤代码：

[html]view plaincopy 
   
 <!doctype html>  
 <html>  
 <head runat="server">  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">  
     <title>考勤打卡</title>  
     <script src="http://api.map.baidu.com/components?ak=1IYR&v=1.0"></script>  
       <link rel="stylesheet" href="../assets/css/amazeui.min.css">  
   <link rel="stylesheet" href="../assets/css/app.css">  
     <script src="../assets/js/jquery.min.js" type="text/javascript"></script>  
     <script src="../assets/js/amazeui.min.js" type="text/javascript"></script>  
     <script src="../assets/js/amazeui.widgets.helper.min.js" type="text/javascript"></script>  
      <script  type="text/javascript">  
          var SHAKE_THRESHOLD = 3000; //定义一个摇动的阈值  
          var last_update = new Date().getTime(); //定义一个变量记录上一次摇动的时间  
          var x = y = z = last_x = last_y = last_z = 0; //定义x、y、z记录三个轴的数据以及上一次触发的时间  
          $(document).ready(function () {  
              $("#btnSave").click(function (e) {    //     绑定保存按钮   
                  btnSave();  
              })  
              //需要判断浏览器是否支持    
              if (window.DeviceMotionEvent) {  
                  window.addEventListener('devicemotion', deviceMotionHandler, false);  
              } else {  
                  $("#shake").html('您的手机现在还不支持摇一摇功能。');  
              }  
              var Name = $("#Name").val();  
              if (!Name) {//没有session  
                  $("#session").show();  
              }  
          });  
          function deviceMotionHandler(eventData) {  
              var acceleration = eventData.accelerationIncludingGravity;  
              var curTime = new Date().getTime(); //获取当前时间戳  
              var diffTime = curTime - last_update;  
              if (diffTime > 100) {  
                  last_update = curTime; //记录上一次摇动的时间  
                  x = acceleration.x; //获取加速度X方向  
                  y = acceleration.y; //获取加速度Y方向  
                  z = acceleration.z; //获取加速度垂直方向  
                  var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; //计算阈值  
                  if (speed > SHAKE_THRESHOLD) {  
                      btnSave();  
                  }  
              }  
              //记录上一次加速度  
              last_x = x;  
              last_y = y;  
              last_z = z;  
          }  
          function btnSave() {  
         var formId = "form";  
         var isOk = Checkform(); //验证form  
         if (isOk == false) {  
             return;  
         }  
         $.ajax({ type: "post",  
             url: "KaoQinAjax.ashx?OperationType=kaoqin",  
             data: $(formId).serialize(),  
             success: function (obj) {              
                 if (obj.IsSuccess == true) {  
                     alertInfo(obj.Msg);  
                     window.location = "KaoQinList.aspx";                   
                 }  
                 else {  
                     alertInfo(obj.Msg);                 
                 }  
             }  
         });  
     }  
     function Checkform() {  
         var address = $("#address").val();  
         if (!address) {  
             alertInfo("地理位置为空，请开打GPS,刷新所在位置");  
             return false;  
         }  
         return true;  
     }  
     function alertInfo(text) {  
         alert(text);  
     }  
         </script>  
 </head>  
 <body>  
     <form id="form1" runat="server"  class="am-form" >  
       <fieldset>  
       <legend>考勤打卡</legend>    
     <input type="hidden" id="Name"  name="Name" value="<%=Name%>" />   
  <div class="am-form-group">  
       <label for="doc-ta-1">所在位置 </label>     
       <p>  
       <lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo>  
       <input type="hidden" id="address"  name="address"/>  
        <input type="hidden" id="lng"  name="lng"/>  
         <input type="hidden" id="lat"  name="lat"/>  
       </p>  
     </div>  
           
 <script>     
         // 先获取元素  
         var lbsGeo = document.getElementById('geo');  
         //监听定位失败事件 geofail    
         lbsGeo.addEventListener("geofail", function (evt) {  
             alert("地理位置为空，请开打GPS,刷新所在位置");  
         });  
         //监听定位成功事件 geosuccess  
         lbsGeo.addEventListener("geosuccess", function (evt) {  
             var address = evt.detail.address;  
             var coords = evt.detail.coords;  
             var x = coords.lng;  
             var y = coords.lat;  
             $("#address").val(address);  
             $("#lng").val(x);  
             $("#lat").val(y);  
         });  
   
 </script>    
      <div id="shake" style="font-size: 14px; margin: 10px; line-height: 35px;"></div>      
      <div id="session" style="font-size: 14px; margin: 10px; line-height: 35px;display:none">请关闭后，重新打开</div>     
      <button type="button" class="am-btn am-btn-primary am-btn-block" id="btnSave">不能摇一摇点击</button>  
      </fieldset>  
     </form>  
 </body>  
 </html>  

实现效果