微信公众号开发实例之全局计时器的案例

前端 专栏收录该内容
332 篇文章 6 订阅
图片.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后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫:【编程微刊】

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值