演示：http://2008.163.com/special/00742RKN/163_index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>163奥运金牌榜</title>
<link href="http://mimg.163.com/index/new_2008/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*奥运定义*/
.cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;}
.login_month_img{background:url(/u/info_img/2008-08/09/big-1.jpg) no-repeat 10px top; top:0}
.login_month_img1{ width:55px;height:200px;background:url(/u/info_img/2008-08/09/big-1.jpg) no-repeat -408px 0}
.login_month{background:url(/u/info_img/2008-08/09/month.jpg) no-repeat}
.aoyunComment{ display:inline; float:left; margin:0 auto; clear:both; position:relative; z-index:8; border:0px; width:490px; text-align:left}
.aoyunComment .medal{ border:0px; margin-top:3px; height:48px;}
.aoyunComment h2{ float:left; font-size:12px; margin:0; padding:3px 6px 0; width:16px; text-align:center; font-weight:400; color:#c00; border:0px}
.aoyunComment .medal h2{ height:45px;}
.aoyunComment .medal .list{ float:left; width:271px; height:48px; overflow:hidden;}
.aoyunComment .medal ol{ float:left; margin:0; padding:0; list-style:none; width:278px; position:relative; z-index:8}
.aoyunComment .medal ol li{ float:left; position:absolute; left:-1px; top:-1px; width:135px; height:23px; line-height:23px; border:0px; background:url(/u/info_img/2008-08/09/num.gif) no-repeat 6px 7px}
.aoyunComment .medal ol li.no1,.aoyunComment .medal ol li.no3{ line-height:24px; height:24px}
.aoyunComment .medal ol li.no1{background-position:6px 6px}
.aoyunComment .medal ol li.no2{top:24px; background-position:6px -23px}
.aoyunComment .medal ol li.no3{left:130px; background-position:6px -50px}
.aoyunComment .medal ol li.no4{left:130px; top:24px; background-position:6px -82px}
.aoyunComment .medal ol li .flag{ float:left; margin:6px 0 -2px 30px;}
.aoyunComment .medal ol li .country,.aoyunComment .medal ol li .price{ padding-left:6px}
.aoyunComment .medal ol li .price{ color:#c00}
.aoyunComment .medal .aylogo{float:left; width:90px; height:40px; padding:4px; text-align:center;border:0px}
.aoyunComment .medal ol li a,.aoyunComment .medal ol li a:visited{ color:#000}
.aoyunComment .medal ol li a:hover{ color:#f00}
.aoyunComment .newsComment{ border:0px; border-top:0; height:113px; margin-top:8px; border-top:#eaeaea 1px solid}
.aoyunComment .newsComment h2{ padding-top:9px; height:70px;}
.aoyunComment .newsComment .comList h3 a{ font-size:16px; font-family:"黑体"; font-weight:400; color:#e90101; line-height:26px}
.aoyunComment .newsComment .comList h3,.aoyunComment .newsComment .comList ul{ margin:0; padding:0; list-style:none}
.aoyunComment .newsComment .comList{ float:left; width:400px;}
.aoyunComment .newsComment .comList ul a{ color:#818181}
.aoyunComment .newsComment .comList ul a:hover,.aoyunComment .newsComment .comList h3 a:hover{ color:#f00}
.aoyunComment .newsComment .comList ul li{ background:url(/u/info_img/2008-08/09/listbg.gif) no-repeat 2px 6px; line-height:20px; padding-left:10px}
.aoyunComment .newsComment .comList .comMore{ text-align:right;}
ul.aaa li{ float:left; width:175px; height:24px; color:#FF0000}
.aoyunComment .newsComment .comList .aaa a{color:#000;}
</style>
<base target="_blank" />
</head>
<body>
<div class="aoyunComment">
<div class="medal">
<h2><a href="http://gold.2008.163.com/" class="cDRed">金牌榜</a></h2>
<div class="list" id="g_gold_ranking">
<ol>
<li class="no1"> </li>
<li class="no2"> </li>
<li class="no3"> </li>
<li class="no4"> </li>
</ol>
</div>
<div class="奥运" style="margin-top:2px"><a href=http://2008.163.com> <img src="/u/info_img/2008-08/09/90-40.jpg" width="90" height="40" /></a></div>
</div>
</div>
<!-- LIVE NEWS START -->
<script>
function f_data_updateFunc(list){
var rankList=f_Live_Data.parseRanklist(list,4);
var rankingTable=document.getElementById("g_gold_ranking");
var domli=rankingTable.getElementsByTagName('li');
for(var i=0;i<domli.length;i++)
{
var rowdata=rankList[i];
domli[i].innerHTML='<a href="http://data.2008.163.com/rank/d,n,1,'+rowdata.id+'.html" target="_blank"><img src="" class="flag" width="16" height="11" /><span class="country">'+ rowdata.name+'</span><span class="price">'+rowdata.au+'枚</span></a>';
}
}
</script>
<!-- LIVE NEWS START -->
<script type="text/javascript">
var f_Live_Data= new Object();
f_Live_Data.dataRequestURL="http://msg.2008.163.com/live.js"; //数据地址
f_Live_Data.refreshTime=5000;//刷新时间,单位毫秒
f_Live_Data.lastMessageID=0;//记录最近一次弹窗ID
f_Live_Data.COOKIE_LASTMSGID_NAME="NTES_PM_LastMsgID";//cookie名
f_Live_Data.getCookieVal=function (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
f_Live_Data.GetCookie=function (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return this.getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return "";
}
f_Live_Data.SetCookie=function (cookieName,cookieValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=1;
expire.setTime(today.getTime() + 3600000*24*nDays);
document.cookie = cookieName+"="+escape(cookieValue) + ";path=/;domain=.163.com;expires="+expire.toGMTString();
}
f_Live_Data.init=function()
{
if(navigator.cookieEnabled){
this.lastMessageID = (this.GetCookie(this.COOKIE_LASTMSGID_NAME) && this.GetCookie('NTES_PM_LReqData')) ? parseInt(this.GetCookie(this.COOKIE_LASTMSGID_NAME)) : 0;
setInterval("f_Live_Data.DoRequest()",this.refreshTime);
this.DoRequest();
}
}
f_Live_Data.GetCookieCacheData=function()
{
var cdata=this.GetCookie('NTES_PM_LReqData');
var data=new Object();
if(cdata){
var cdataf=cdata.split("|");
data.lastModify=cdataf[0];
data.title=cdataf[1];
data.link=cdataf[2];
data.goldList=eval(cdataf[3]);
}
return data;
}
f_Live_Data.SetCookieCacheData=function(data)
{
var datastr=data.lastModify+"|"+data.title+"|"+data.link+"|[";
for(var i=0;i<data.goldList.length;i++){
var rowdata=data.goldList[i];
var listStr='{name:"'+rowdata.name+'",id:"'+rowdata.id+'",au:'+rowdata.au+',ag:'+rowdata.ag+',cu:'+rowdata.cu+',ranking:'+rowdata.ranking+'},';
datastr+=listStr;
}
datastr=datastr.substring(0,datastr.length-1)+"]";
this.SetCookie('NTES_PM_LReqData',datastr);
}
f_Live_Data.DoRequest=function (){
//debug.value+="do request\n";
var ct=this.GetCookie('NTES_PM_ReqTime') ? parseInt(this.GetCookie('NTES_PM_ReqTime')) : 0;
var reqingTime=this.GetCookie('NTES_PM_ReqingTime') ? parseInt(this.GetCookie('NTES_PM_ReqingTime')) : 0;
var t=new Date().getTime();
if(t-ct>=this.refreshTime){//cookie中的cache 已经过期
//debug.value+="cookie cache expire \n";
if(reqingTime<=0 || t-reqingTime>this.refreshTime)
{
//debug.value+="没有执行中的请求,发送请求 \n";
this.sendRequest();
}else{
//debug.value+="有执行中的请求,等候2秒 \n";
setTimeout("f_Live_Data.DoRequest()",2000);//有正在执行中的请求，等候2秒再拿数据
}
}else{//cookie数据没有过期
//debug.value+="cookie cache not expire \n";
this.onData(this.GetCookieCacheData());
}
}
f_Live_Data.sendRequest=function()
{
//debug.value+="开始请求"+this.dataRequestURL+" \n";
var t=new Date().getTime();
this.SetCookie('NTES_PM_ReqingTime',t);
var obj=document.getElementById('liveDataID');
if(obj) obj.parentNode.removeChild(obj);
var newscript=document.createElement("script");
newscript.type="text/javascript";
newscript.src=this.dataRequestURL;
newscript.id="liveDataID";
document.getElementsByTagName("head")[0].appendChild(newscript);
}
function f_onLiveDataRequestComplete(data)
{
//debug.value+="从服务器接收到数据 \n";
var t=new Date().getTime();
f_Live_Data.SetCookie('NTES_PM_ReqTime',t);
f_Live_Data.SetCookie('NTES_PM_ReqingTime',0);
f_Live_Data.SetCookieCacheData(data);
f_Live_Data.onData(data);
}
f_Live_Data.parseRanklist=function(list,len)
{
var rankList=new Array();
for(var i=1;i<len;i++) rankList.push(list[i]);
if(list[0].ranking>len){
rankList.push(list[0]);
}else{
rankList.push(list[len]);
}
return rankList;
}
f_Live_Data.onData=function(data)
{
///debug.value+="数据："+data.lastModify+" \n";
//update ranklist
//填充数据，防止金牌榜数据不全时出现异常。
if(data.goldList.length<5) for(var j=0;j<3;j++) data.goldList.push({name:"-",id:"-",au:'--',ag:'--',cu:'--',ranking:''});
try{
f_data_updateFunc(data.goldList) //在需要更新数据的地方重新定义此函数。
}
catch(e){}
// popup when newmsg coming;
var msgid=parseInt(data.lastModify);
if(msgid >this.lastMessageID){
this.SetCookie(this.COOKIE_LASTMSGID_NAME,msgid);
this.lastMessageID=msgid;
}
}
f_Live_Data.init();
</script>
<!-- LIVE NEWS END -->
</body>
</html>