微信公众号开发实例之全局计时器的案例
图片.png
需求一：index.html里面的数据从后台获取并渲染在前端页面
代码：
//index.html页面JS代码如下
//判断openid是否已经获取
if(sessionStorage.getItem("openid") == null){
//获取用户的openId
$.ajax({
url : "getOpenId.action",
dataType : "json",
type : "get",
data : "code="+GetQueryString("code"),
success : function(data){
//保存openid
if(data != '')
sessionStorage.setItem("openid",data);
//根据openid查询sa车辆
getCars(data);
}
})
}else{
getCars(sessionStorage.getItem("openid"))
}
//获取登记车辆
function getCars(openid){
$.ajax({
url : "getCars.action",
dataType : "json",
type : "get",
data : "openid="+openid,
success : function(data){
if(data == -1){
$("#flag").val("1");
return;
};
if (data.length > 0) {
var laver = "";
for (var i = 0; i < data.length; i++) {
laver += '<li>';
laver += '<div class="imgpanel"><a href="server.html?carNum='+data[i].carNum+'&beacon='+data[i].beacon+'">';
if(data[i].isCommit == 2){
laver += '<img src="img/bmw_red.png" class="am-img-responsive" />';
}else if(data[i].isCommit == 1){
laver += '<img src="img/bmw.png" class="am-img-responsive" />';
}else{
laver += '<img src="img/bmw_grey.png" class="am-img-responsive" />';
}
laver += '</a></div>';
laver += '<a href="server.html?carNum='+data[i].carNum+'&beacon='+data[i].beacon+'"> <div class="infopanel" style="width:50%;">';
if(data[i].beacon != null){
laver += '<h3>'+data[i].carNum+'</h3><p>'+data[i].beacon+'</p></div></a>';
}else{
laver += '<h3>'+data[i].carNum+'</h3><p></p></div></a>';
}
laver += '<div class="imgpanel" style="float: right; padding: 24px;">';
laver += '<a href="map.html?deviceId='+data[i].beacon+'"><img src="img/nav.png" class="am-img-responsive" /></a></div>';
laver += '</li>';
}
laver += "<li style='border:none'></li><li style='border:none'></li>"
$('#car').html(laver);
}
}
})
};
需求二：点击开始服务按钮，从零开始计算时间
图片.png
//先看一个单纯的倒计时的功能页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
#box{width:400px;height:400px;margin:40px auto;}
#box div{width:200px;height:40px;border:1px #F3C solid;text-align:center;float:left;font-size:26px;}
#box button{float:left;margin-top:10px;margin-left:20px;}
#box span{float:left;width:200px;height:100px;overflow-y:auto;display:block;border:1px #C9C solid;margin-top:10px;}
</style>
</head>
<body>
<div id="box">
<div id="timer"></div>
<button onClick="btTime()">开始服务</button>
</div>
<script type="text/javascript">
var timer=document.getElementById("timer");
var butt=document.getElementsByTagName("button");
var hour='00'; //时
var minus='00';//分
var seconds='00';//秒
timer.innerHTML=hour+":"+minus+":"+seconds;
var x=0,y=0,f=0,a=0,b=0,t1,t2;
var flag=0;
function btTime(){
/*ajax:*/
switch (flag){
case 0 :
flag=1;
w=1;
t1=setInterval(beginS,1000);
butt[0].innerHTML='结束服务';break;
case 1 :
flag=2;
clearInterval(t1);
butt[0].innerHTML='服务已结束';break;
}
}
function beginS(){//计算秒
x ++;
if(x<10){
seconds = '0' + x;
}else if(x>=10&&x<=59){
seconds = x;
}else if(x>59){
seconds = '00';
x = 0;
a++;
}
if(a<10){
minus = '0' + a;
}else if(a>=10&&a<=59){
minus = a;
}else if(a>59){
minus = '00';
a = 0;
b++;
}
if(b<10){
hour = '0' + b;
}else if(b>=10&&b<=59){
hour = b;
}
timer.innerHTML=hour+":"+minus+":"+seconds;
}
</script>
</body>
</html>
需求三：获取index页面的每一个时间和车牌的key,value值，共用全局计时器
图片.png
//server.html在项目里面的功能页面JS代码如下:
<!--html部分-->
<div id="timer"></div> <!--对应时间-->
<div id="carNum"></div> <!--对应车牌号-->
<button id="btn"></button><!--开始结束按钮-->
<script type="text/javascript">
$(function(){
$("#carNum").html(GetQueryString("carNum"));
var a=0,b=0,c=0,t1;
$.ajax({
url : "getTimer.action",
dataType : "json",
type : "get",
data : "beacon="+GetQueryString("beacon"),
success : function(data){
if(data == null){//还没有开始服务
$("#btn").html("开始服务");
$("#timer").html("00:00:00");
return;
}else if(data.endTime != 0){//服务已经结束
$("#timer").html("00:00:00");
$("#btn").html("服务已结束");
$("#btn").css({
background:"#f2f2f2",
color:"#898989"
})
//计算时分秒
var time = data.endTime-data.beginTime;
hour = parseInt(time/1000/60/60);
if(hour<10){hour=''+0+hour;}
minus = parseInt((time/1000/60 - (hour*60)));
if(minus<10){minus=''+0+minus;}
seconds = parseInt(time/1000-((hour*60*60)+(minus*60)));
if(seconds<10){seconds=''+0+seconds;}
$("#timer").html(hour+":"+minus+":"+seconds);
return;
}else{//服务开始，还没有结束服务
$("#timer").html("00:00:00");
$("#btn").html("结束服务");
//计算时分秒
var time= new Date().getTime()-data.beginTime; //时间差的毫秒数
c = parseInt(time/1000/60/60);
b = parseInt((time/1000/60 - (c*60)));
a = parseInt(time/1000-((c*60*60)+(b*60)));
t1=setInterval(beginS,1000);
return;
}
}
})
function beginS(){//计算秒
a++;
if(a<10){
seconds = '0' + a;
}else if(a>=10&&a<=59){
seconds = a;
}else if(a>59){
seconds = '00';
a = 0;
b++;
}
if(b<10){
minus = '0' + b;
}else if(b>=10&&b<=59){
minus = b;
}else if(b>59){
minus = '00';
b = 0;
c++;
}
if(c<10){
hour = '0' + c;
}else if(c>=10&&c<=59){
hour = c;
}
$("#timer").html(hour+":"+minus+":"+seconds);
}
//按钮点击事件
$("#btn").on("click",function(){
if($(this).html()=="开始服务"){
t1=setInterval(beginS,1000);
$(this).html("结束服务")
//记录sa开始服务时间
$.ajax({
url : "setBeginTime.action",
dataType : "json",
type : "POST",
data : {"beacon":GetQueryString("beacon"),"carNum":GetQueryString("carNum")},
success : function(data){
}
})
return;
}
if($(this).html()=="结束服务"){
if(confirm("是否结束服务")){
clearInterval(t1);
$(this).css({
background:"#f2f2f2",
color:"#898989"
})
$(this).html("服务已结束");
//记录sa结束服务的时间
$.ajax({
url : "setEndTime.action",
dataType : "json",
type : "get",
data : {"beacon":GetQueryString("beacon")},
success : function(data){
}
})
}
return;
}
return;
})
//获取地址栏后面的参数 （从index.html跳转过来的时候，用正则表达式获取参数）
function GetQueryString(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return decodeURI(r[2]); return null;
}
})
</script>
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫：【编程微刊】
