微信考勤摇一摇考勤

最后更新于:2022-04-01 07:06:13

看到网上又不少微信企业号的摇一摇考勤,自己也想做一个,但查遍了微信企业号文档,也没有看到摇一摇的相关API,本以为做不出来了,想不到再问了同事后,才知道其实很简单,摇一摇不需要微信企业号的文档,HTML5就有,摇一摇其实就是相当于点击了保存按钮而已。 其实获取地理位置HTML5也支持。 HTML5 - 使用地理定位 ~~~ <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> ~~~ 摇一摇的核心代码: ~~~ /需要判断浏览器是否支持 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; } ~~~ 完整的摇一摇考勤代码: ~~~ <!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> ~~~ 实现效果 **![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-14_569757de19514.jpg)**
';