微信企業號開發:微信考勤搖一搖考勤

搖一搖其實就是相當於點擊了保存按鈕而已。

其實獲取地理位置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>

實現效果

微信企業號開發:微信考勤搖一搖考勤

今天！通義靈碼在北京、成都、杭州三城開講啦

【BI 可視化插件】怎麼做？手把手教你實現

網站第三方登錄

Java開發中的23種設計模式詳解

mybatis實戰教程(mybatis in action),mybatis入門到精通

瀏覽器緩存機制

HTTP 頭部信息和錯誤碼彙總詳細解釋

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結