2011年赛跑成绩实时更新-优快云博客

<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Race</title>
 <!--下面所有的顺序至关重要-->
<link href="race/css/index.css" rel="stylesheet" type="text/css" />
  <!--一定要加-->
<link href="race/css/jquery-ui.min.css" rel="stylesheet" type="text/css" />
 <!--js库插入的顺序一定要对-->
<script type="text/javascript" src="race/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="race/js/jquery-ui.min.js"></script>

<script type="text/javascript">

 function getXMLRacers(){
    $.ajax({   
    url:"race/finishers.xml",
    cache:false,
    dataType:"xml",
    success: function(xml){
        $('#finishers_m').empty();
        $('#finishers_f').empty();
        $('#finishers_all').empty();
        $(xml).find("runner").each(function() {
            var info='<li>Name:'+$(this).find("fname").text()+''+$(this).find("lname").text()+'. Time:'+$(this).find("time").text()+'</li>';
            if($(this).find("gender").text()=="m"){
                $('#finishers_m').append(info)
                }else if($(this).find("gender").text()=="f"){
                    $('#finishers_f').append(info);
                    }else{}
                    $('#finishers_all').append(info);
          });
        }
     })
       getTime();
  }

  //获取时间函数
 function getTime(){
     var a_p="";
     var d=new Date();
     var curr_hour=d.getHours();
     (curr_hour<12)? a_p="AM":a_p="PM";
     (curr_hour==0)? curr_hour=12:curr_hour=curr_hour;
     (curr_hour>12)?curr_hour=curr_hour-12:curr_hour=curr_hour;
     var curr_min=d.getMinutes().toString();
     var curr_sec=d.getSeconds().toString();
     if(curr_min.length==1){curr_min="0"+curr_min;}
     if(curr_sec.length==1){curr_sec="0"+curr_sec;}
     $("#updatedTime").html(curr_hour+":"+curr_min+":"+curr_sec+" "+a_p);
     }

 $(function() {
     $( "#main" ).tabs();//一定要放在前面
     var FREQ=10000; //10秒
      function startAJAXcalls(){
      setTimeout(function(){
          getXMLRacers();
          startAJAXcalls();
          },
          FREQ
          );
      } 
     getXMLRacers();
     startAJAXcalls(); 

  } );
</script>

</head>

<body>

<header>
<h2>2011 Race Finishers! </h2>
</header>

<div id="main">
  <ul class="idTabs">
    <li><a href="#male">Male Finishers</a></li>
    <li><a href="#female">Female Finishers</a></li>
    <li><a href="#all">All Finishers</a></li>
  </ul>
  <div id="male">
    <h4>Male Finishers</h4>
    <ul id="finishers_m"></ul>
  </div>
  <div id="female">
    <h4>Female Finishers</h4>
    <ul id="finishers_f"></ul>
  </div>
  <div id="all">
     <h4>All Finishers</h4>
    <ul id="finishers_all"></ul>
  </div>
</div>

<footer>
  <h4>Congratulations to all our finishers!</h4>
  <br/>Last Update:<div id="updatedTime"></div>
</footer>

</body>
</html>