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

图片.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 创作不易,转载请告知

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阿杜的世界

Mac版Java开发环境配置

17330
来自专栏九彩拼盘的叨叨叨

网页PPT: reveal.js 介绍

reveal.js 是一个展示内容的框架,可以简单的理解为网页版的PPT。我们用 reveal.js 做出来的PPT其实是一个HTML文件。

61320
来自专栏24K纯开源

Adobe Premiere Pro生成峰值文件假死

一、正文 使用Adobe的Premiere Pro CC进行视频剪辑制作的时候,有的时候在右下角总会出现一个“自动生成峰值文件”的提示符,并跟随一个进度条: ?...

1.4K60
来自专栏数据小魔方

左右用R右手Pyhon系列——趣直播课程抓取实战

本文将以趣直播课程信息数据抓取为例,展示如何使用RCurl进行结合浏览器抓包操作进行简易数据抓取。 library("RCurl") livrary("XML"...

35670
来自专栏Jerry的SAP技术分享

给谷歌输入法增添自定义词组,提高输入效率

我在写微信公众号文章时,经常需要重复输入一些名词,比如CRM,C4C,S/4HANA等等。为了减少输入,我在查找一款输入法,能够让我通过少量的输入,就能够快速打...

14210
来自专栏木宛城主

SharePoint 2013怎样创建Wiki库

我们使用Wiki页面来分享知识,增进团队合作。下面我将向大家展示SharePoint 2013 Wiki的使用方法。教程我都将以这张Wiki页面(即当前页)为示...

24670
来自专栏令仔很忙

Bootstrap快速上手(一)----右键菜单

一款软件,除了稳定,功能强大,用户体验也很重要。界面风格和布局的一致性让人在视觉上感觉到这是一个统一的系统,协调的系统,至于采用什么风格及颜色系统,美工和设计...

17010
来自专栏ionic3+

Ionic4与Ionic3部分比较

有较长时间没有用Ionic了,见新的公众号需求比较简单,便决定使用Ionic4来实现。

2.8K10
来自专栏我的小碗汤

【插件】解放鼠标,让浏览器更智能

首先感谢大家参与这周的送书活动。已经给小助手微信发送好友请求的,不要着急,这两天会通过验证,并拉大家进入抽奖群参与抽奖,大家肯定都可以参与的。

11820
来自专栏大史住在大前端

javascript基础修炼(5)—Event Loop

如果没有详细钻研过异步队列,答对的可能性很低。题目的考察点很明确,就是javascript中最核心的特点之一的【异步】,了解了原理以后,你就会明白javascr...

10620

扫码关注云+社区

领取腾讯云代金券