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

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

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

HTML5 - 使用地理定位

[javascript]  view plain copy
  1. <script>  
  2. var x=document.getElementById("demo");  
  3. function getLocation()  
  4.   {  
  5.   if (navigator.geolocation)  
  6.     {  
  7.     navigator.geolocation.getCurrentPosition(showPosition);  
  8.     }  
  9.   else{x.innerHTML="Geolocation is not supported by this browser.";}  
  10.   }  
  11. function showPosition(position)  
  12.   {  
  13.   x.innerHTML="Latitude: " + position.coords.latitude +  
  14.   "<br />Longitude: " + position.coords.longitude;  
  15.   }  
  16. </script>  
摇一摇的核心代码:

[javascript]  view plain copy
  1. /需要判断浏览器是否支持    
  2.              if (window.DeviceMotionEvent) {  
  3.                  window.addEventListener('devicemotion', deviceMotionHandler, false);  
  4.              } else {  
  5.                  $("#shake").html('您的手机现在还不支持摇一摇功能。');  
  6.              }  
  7.               function deviceMotionHandler(eventData) {  
  8.              var acceleration = eventData.accelerationIncludingGravity;  
  9.              var curTime = new Date().getTime(); //获取当前时间戳  
  10.              var diffTime = curTime - last_update;  
  11.              if (diffTime > 100) {  
  12.                  last_update = curTime; //记录上一次摇动的时间  
  13.                  x = acceleration.x; //获取加速度X方向  
  14.                  y = acceleration.y; //获取加速度Y方向  
  15.                  z = acceleration.z; //获取加速度垂直方向  
  16.                  var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; //计算阈值  
  17.                  if (speed > SHAKE_THRESHOLD) {  
  18.                      btnSave();  
  19.                  }  
  20.              }  
  21.              //记录上一次加速度  
  22.              last_x = x;  
  23.              last_y = y;  
  24.              last_z = z;  
  25.          }  
完整的摇一摇考勤代码:

[html]  view plain copy
  1. <!doctype html>  
  2. <html>  
  3. <head runat="server">  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">  
  6.     <title>考勤打卡</title>  
  7.     <script src="http://api.map.baidu.com/components?ak=1IYR&v=1.0"></script>  
  8.       <link rel="stylesheet" href="../assets/css/amazeui.min.css">  
  9.   <link rel="stylesheet" href="../assets/css/app.css">  
  10.     <script src="../assets/js/jquery.min.js" type="text/javascript"></script>  
  11.     <script src="../assets/js/amazeui.min.js" type="text/javascript"></script>  
  12.     <script src="../assets/js/amazeui.widgets.helper.min.js" type="text/javascript"></script>  
  13.      <script  type="text/javascript">  
  14.          var SHAKE_THRESHOLD = 3000; //定义一个摇动的阈值  
  15.          var last_update = new Date().getTime(); //定义一个变量记录上一次摇动的时间  
  16.          var x = y = z = last_x = last_y = last_z = 0; //定义x、y、z记录三个轴的数据以及上一次触发的时间  
  17.          $(document).ready(function () {  
  18.              $("#btnSave").click(function (e) {    //     绑定保存按钮   
  19.                  btnSave();  
  20.              })  
  21.              //需要判断浏览器是否支持    
  22.              if (window.DeviceMotionEvent) {  
  23.                  window.addEventListener('devicemotion', deviceMotionHandler, false);  
  24.              } else {  
  25.                  $("#shake").html('您的手机现在还不支持摇一摇功能。');  
  26.              }  
  27.              var Name = $("#Name").val();  
  28.              if (!Name) {//没有session  
  29.                  $("#session").show();  
  30.              }  
  31.          });  
  32.          function deviceMotionHandler(eventData) {  
  33.              var acceleration = eventData.accelerationIncludingGravity;  
  34.              var curTime = new Date().getTime(); //获取当前时间戳  
  35.              var diffTime = curTime - last_update;  
  36.              if (diffTime > 100) {  
  37.                  last_update = curTime; //记录上一次摇动的时间  
  38.                  x = acceleration.x; //获取加速度X方向  
  39.                  y = acceleration.y; //获取加速度Y方向  
  40.                  z = acceleration.z; //获取加速度垂直方向  
  41.                  var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; //计算阈值  
  42.                  if (speed > SHAKE_THRESHOLD) {  
  43.                      btnSave();  
  44.                  }  
  45.              }  
  46.              //记录上一次加速度  
  47.              last_x = x;  
  48.              last_y = y;  
  49.              last_z = z;  
  50.          }  
  51.          function btnSave() {  
  52.         var formId = "form";  
  53.         var isOk = Checkform(); //验证form  
  54.         if (isOk == false) {  
  55.             return;  
  56.         }  
  57.         $.ajax({ type: "post",  
  58.             url: "KaoQinAjax.ashx?OperationType=kaoqin",  
  59.             data: $(formId).serialize(),  
  60.             success: function (obj) {              
  61.                 if (obj.IsSuccess == true) {  
  62.                     alertInfo(obj.Msg);  
  63.                     window.location = "KaoQinList.aspx";                   
  64.                 }  
  65.                 else {  
  66.                     alertInfo(obj.Msg);                 
  67.                 }  
  68.             }  
  69.         });  
  70.     }  
  71.     function Checkform() {  
  72.         var address = $("#address").val();  
  73.         if (!address) {  
  74.             alertInfo("地理位置为空,请开打GPS,刷新所在位置");  
  75.             return false;  
  76.         }  
  77.         return true;  
  78.     }  
  79.     function alertInfo(text) {  
  80.         alert(text);  
  81.     }  
  82.         </script>  
  83. </head>  
  84. <body>  
  85.     <form id="form1" runat="server"  class="am-form" >  
  86.       <fieldset>  
  87.       <legend>考勤打卡</legend>    
  88.     <input type="hidden" id="Name"  name="Name" value="<%=Name%>" />   
  89.  <div class="am-form-group">  
  90.       <label for="doc-ta-1">所在位置 </label>     
  91.       <p>  
  92.       <lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo>  
  93.       <input type="hidden" id="address"  name="address"/>  
  94.        <input type="hidden" id="lng"  name="lng"/>  
  95.         <input type="hidden" id="lat"  name="lat"/>  
  96.       </p>  
  97.     </div>  
  98.           
  99. <script>     
  100.         // 先获取元素  
  101.         var lbsGeo = document.getElementById('geo');  
  102.         //监听定位失败事件 geofail    
  103.         lbsGeo.addEventListener("geofail", function (evt) {  
  104.             alert("地理位置为空,请开打GPS,刷新所在位置");  
  105.         });  
  106.         //监听定位成功事件 geosuccess  
  107.         lbsGeo.addEventListener("geosuccess", function (evt) {  
  108.             var address = evt.detail.address;  
  109.             var coords = evt.detail.coords;  
  110.             var x = coords.lng;  
  111.             var y = coords.lat;  
  112.             $("#address").val(address);  
  113.             $("#lng").val(x);  
  114.             $("#lat").val(y);  
  115.         });  
  116.   
  117. </script>    
  118.      <div id="shake" style="font-size: 14px; margin: 10px; line-height: 35px;"></div>      
  119.      <div id="session" style="font-size: 14px; margin: 10px; line-height: 35px;display:none">请关闭后,重新打开</div>     
  120.      <button type="button" class="am-btn am-btn-primary am-btn-block" id="btnSave">不能摇一摇点击</button>  
  121.      </fieldset>  
  122.     </form>  
  123. </body>  
  124. </html>  
实现效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值