需求一：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); } } }) };
需求二：点击开始服务按钮，从零开始计算时间
//先看一个单纯的倒计时的功能页面 <!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值，共用全局计时器
//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>
