自己做的微信打卡

Shaka 8月前 ⋅ 482 阅读

给公司做的微信打卡,手机打卡.直接更把敏感信息去掉,你们改一下Key就可以用了.

ui用的是weui微信的UI,很丑很丑.其他是腾讯地图和腾讯位置服务demo改的.有问题随时留言.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>考勤打卡</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<link rel="stylesheet" href="/resources/css/weui.min.css"/>
<style type="text/css">
* {margin:0;padding:0;border:0;}
body {position:absolute;width:100%;height:100%;}
#container{height:35%;width:100%;opacity:0.5;display:block;z-index:999;}
</style>
</head>
<body>
<div class='weui-msg' style="padding-top:0;">
<div class='page__hd' id="container" style="text-align:left"></div>
<div class='weui-msg__text-area'>
<img src="/resources/img/dw.png" id="img" style="width:20px;height:24px">
<p class='weui-msg__desc' id="addr"></p>
<h3 class='weui-dialog__btn weui-dialog__btn_primary' id="geoPage"></h3>
</div>
<div class='weui-msg__opr-area'>
<p class='weui-btn-area'>
<a id="button" class='weui-btn weui-btn_primary'></a>
<a href="/jumpHistory" class='weui-btn weui-btn_default'>查看历史</a>
</p>
</div>
<div class="weui-footer weui-footer_fixed-bottom">
<p class="weui-footer__links">
<a class="weui-footer__link">温馨提示:</a>
</p>
<p class="weui-footer__text">手机时间可能与服务器时间存在差异<br>建议您提前几分钟打卡</p>
</div>
</div>
<!--提示文本限制-->
<div class='js_dialog' id='iosDialog' style='display: none;'>
<div class='weui-mask'></div>
<div class='weui-dialog'>
<div class="weui-dialog__hd"><strong class="weui-dialog__title" id="msg_header"></strong></div>
<div><strong id="msg_status"></strong></div>
<div class='weui-dialog__bd' id="msg_message"></div>
<div class='weui-dialog__ft'>
<a href=" $('#iosDialog').fadeOut(0);" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
</div>
</div>
</div>
<script type="text/JavaScript" src="/resources/js/jquery.js"></script>
<script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=你的key&libraries=drawing,geometry,convertor" charset="utf-8"></script>
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js" charset="utf-8"></script>
<script type="text/JavaScript">
var geolocation = new qq.maps.Geolocation("你的key", "myapp");
var myself = null;
var xy = null;
var marker;
var center=new qq.maps.LatLng(默认公司地图坐标);
var limitRadius=240;
var zoom=16;
//构建地图
var map = new qq.maps.Map(document.getElementById("container"),{
center: center,
zoom: zoom,
draggable:false,
scrollwheel:false,
disableDoubleClickZoom:false,
mapTypeControl:false,
panControl:false,
zoomControl:false,
scaleControl:false
});
//获取位置
var options = {timeout: 4000};
geolocation.getLocation(showPosition, showErr, options);
$("#addr").html("定位中"+"<i class='weui-loading'></i>");

var i = 0;//只创建一个marker和圆
//定位成功
function showPosition(position) {
xy =JSON.stringify(position, null, 4);
xy = ");
$("#addr").html(xy.city+xy.addr);
myself = new qq.maps.LatLng(xy.lat,xy.lng);
if(xy.city!='北京市'){
if(xy.city=='分公司所在地'){
center = new qq.maps.LatLng(分公司坐标);
limitRadius = 100;
}else{
center = new qq.maps.LatLng(另一个分公司坐标....);
limitRadius = 20;
}
zoom = 18;
map.panTo(center);
map.zoomTo(zoom);
}
if(i==0){
new qq.maps.Circle({
map: map,
center: center,
radius: limitRadius,
fillColor: new qq.maps.Color(0,15,255, 0.2),
strokeWeight: 0
});
//创建marker
marker = new qq.maps.Marker({
position: center,
map: map
});
}
map.panTo(myself);
marker.setPosition(myself);
var cardBtn = $("#button");
cardBtn.html("打卡");
if(qq.maps.geometry.spherical.computeDistanceBetween(myself,center)<limitRadius){
$("#geoPage").text("您已在打卡范围内");
cardBtn.attr("href","card()");
}else{
$("#msg_header").text("提示");
$("#msg_message").text('您不在打卡范围内');
cardBtn.attr("href","$('#iosDialog').fadeIn(200);");
$("#geoPage").text("您不在打卡范围内");
$("#img").attr("src","resources/img/dwh.png");
}
i++;
}

//定位出错
function showErr() {
$("#msg_header").text("提示");
$("#msg_message").text('您不在打卡范围内');
$("#button").attr("href","$('#iosDialog').fadeIn(200);");
$("#geoPage").text("您不在打卡范围内");
$("#img").attr("src","resources/img/dwh.png");
$("#addr").html("定位失败");
}
function watchPosition() {
geolocation.watchPosition(showPosition);
}
setInterval("watchPosition()",6000);
//提交或提示
function card(){
var position;
if(xy!=null){
position = xy.lat+","+xy.lng;
}
$.ajax({
type: "GET",
url: "/timeCard?position="+position+"&timestamp=" + new Date().getTime(),
cache:false,
dateType:"json",
success: function(data){
if(null!=data){
if(data.success == true){
$("#msg_header").text(data.header);
$("#msg_status").html(data.time);
$("#msg_message").text(data.message);
$('#iosDialog').fadeIn(200);
}else{
$("#msg_status").html("");
$("#msg_header").text(data.header);
$("#msg_message").text(data.message);
$('#iosDialog').fadeIn(200);
}
}else{
window.location.href="/getLocation";
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#msg_status").html("");
$("#msg_header").text("出错了"+textStatus);
$("#msg_message").text("页面出错了,请刷新页面或重新进入应用");
$('#iosDialog').fadeIn(200);
}
})
}
</script>
</body>
</html>

注意:本文归作者所有,未经作者允许,不得转载

全部评论: 0

    我有话说: