zoukankan      html  css  js  c++  java
  • 微信公众号开发实例之全局计时器的案例

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

  • 相关阅读:
    MSDN Magazine搞错了
    Visual Studio 2005中设置调试符号(Debug Symbols)
    BCB 6的问题
    吴裕雄天生自然Spring Boot使用Spring Data JPA实现人与身份证的一对一关系映射
    吴裕雄天生自然Spring BootSpring Data JPA
    吴裕雄天生自然Spring BootSpring Boot对JSP的支持
    吴裕雄天生自然Spring BootSpring Boot的异常统一处理
    吴裕雄天生自然Spring Boot使用Spring Data JPA实现Author与Article的一对多关系映射
    吴裕雄天生自然Spring Boot解决 Error creating bean with name 'entityManagerFactory' defined in class path resource
    吴裕雄天生自然Spring Boot@ExceptionHandler注解和@ControllerAdvice注解
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701757.html
Copyright © 2011-2022 走看看