200分征求注释：这是从news.sina.com.cn剪出来的一段代码！

Question

晕,这是很简单的CSS,哪里是JS呀
学一下CSS基础就会了.200分,这题200分太好争了

Answer 1

其次是<div>部分<div class="tabss">
<div style="display:none;" id="tabss_script_loader"></div>
<div class="titleBar">
<label><a href="http://finance.sina.com.cn/money/globalindex/index.shtml" target="_blank">全球市场</a></label>
<div class="menu">
<div class="default" id="tab_x_4" onclick="checkView(this);" style="left:183px;">期市</div>
<div class="default" id="tab_x_3" onclick="checkView(this);" style="left:142px;">期指</div>
<div class="default" id="tab_x_2" onclick="checkView(this);" style="left:77px;">黄金原油</div>
<div class="default" id="tab_x_1" onclick="checkView(this);" style="left:36px;">汇市</div>
<div class="default" id="tab_x_0" onclick="checkView(this);" style="left:-5px;">股市</div>
</div>
</div>
<div class="containers">
<div class="listContainer">
<div class="default" id="tab_y_0" onclick="checkView(this);">
<div class="border"></div>
<div class="name">中国</div>
</div>
<div class="default" id="tab_y_1" onclick="checkView(this);">
<div class="border"></div>
<div class="name">亚太</div>
</div>
<div class="default" id="tab_y_2" onclick="checkView(this);">
<div class="border"></div>
<div class="name">北美</div>
</div>
<div class="default" id="tab_y_3" onclick="checkView(this);">
<div class="border"></div>
<div class="name">欧洲</div>
</div>
</div>
<div class="mainContainer">
<div id="tab_0" class="default" config="上证综指,sh000001,http://image.sinajs.cn/newchart/small/nsh000001.gif,http://finance.sina.com.cn/realstock/company/sh000001/nc.shtml,stock|深证成指,sz399001,http://image.sinajs.cn/newchart/small/nsz399001.gif,http://finance.sina.com.cn/realstock/company/sz399001/nc.shtml,stock"></div>
<div id="tab_1" class="default" config="恒生指数,int_hangseng,http://image.sinajs.cn/newchart/hk_stock/min_small/HSI.gif,http://finance.sina.com.cn/stock/hkstock/quote.html?code=HSI,int|日经指数,int_nikkei,,,int"></div>
<div id="tab_2" class="default" config="道琼斯,int_dji,,http://stock.sina.com.cn/cgi-bin/us/stock/quote/quoteus.cgi?symbol=dji&time=1dy,int_|纳斯达克,int_nasdaq,,http://stock.sina.com.cn/cgi-bin/us/stock/quote/quoteus.cgi?symbol=nasdaq&time=1dy,int_|标准普尔指数,int_sp500,,,int_|多伦多证交所指数,int_sptsx,,,int_"></div>
<div id="tab_3" class="default" config="伦敦指数,int_ftse,,,int_|欧盟50指数,int_djstoxx50,,,int_|德国指数,int_dax30,,,int_|彭博欧洲500指数,int_bloombergeuropean500,,,int_"></div>
<div id="tab_4" class="default" config="人民币,USDCNY,http://image.sinajs.cn/newchart/v5/forex/min30_m/USDCNY.gif,http://finance.sina.com.cn/money/forex/hq/USDCNY.shtml,forex|港币,HKD,http://image.sinajs.cn/newchart/v5/forex/min5_m/HKD.gif,http://finance.sina.com.cn/money/forex/hq/USDCNY.shtml,forex"></div>
<div id="tab_5" class="default" config="日元,JPY,http://image.sinajs.cn/newchart/v5/forex/min5_m/JPY.gif,http://finance.sina.com.cn/money/forex/hq/JPY.shtml,forex|澳元,AUD,http://image.sinajs.cn/newchart/v5/forex/min5_m/AUD.gif,http://finance.sina.com.cn/money/forex/hq/AUD.shtml,forex"></div>
<div id="tab_6" class="default" config="瑞郎,CHF,http://image.sinajs.cn/newchart/v5/forex/min5_m/CHF.gif,http://finance.sina.com.cn/money/forex/hq/CHF.shtml,forex|加元,CAD,http://image.sinajs.cn/newchart/v5/forex/min5_m/CAD.gif,http://finance.sina.com.cn/money/forex/hq/CAD.shtml,forex"></div>
<div id="tab_7" class="default" config="欧元,EUR,http://image.sinajs.cn/newchart/v5/forex/min5_m/EUR.gif,http://finance.sina.com.cn/money/forex/hq/EUR.shtml,forex|英镑,GBP,http://image.sinajs.cn/newchart/v5/forex/min5_m/GBP.gif,http://finance.sina.com.cn/money/forex/hq/GBP.shtml,forex"></div>
<div id="tab_8" class="default" config="黄金,hf_GC,http://image.sinajs.cn/newchart/v5/futures/global/mins/GC.gif,http://finance.sina.com.cn/money/future/quote_hf.html?GC,hk_futures|原油,hf_CL,http://image.sinajs.cn/newchart/v5/futures/global/mins/CL.gif,http://finance.sina.com.cn/money/future/quote_hf.html?CL,hk_futures"></div>
<div id="tab_9" class="default" config="期指0903,CFF_IF0903,http://image.sinajs.cn/newchart/cffex/mins/IF0903.gif,http://finance.sina.com.cn/futures/quote/cff/bc.shtml?code=IF0903,cffex|期指0906,CFF_IF0906,http://image.sinajs.cn/newchart/cffex/mins/IF0906.gif,http://finance.sina.com.cn/futures/quote/cff/bc.shtml?code=IF0906,cffex"></div>
<div id="tab_10" class="default" config="大豆0905,a0905,http://image.sinajs.cn/newchart/v5/futures/mins/a0905.gif,http://finance.sina.com.cn/money/future/quote.html?a0905,futures|铜0902,cu0902,http://image.sinajs.cn/newchart/v5/futures/mins/cu0902.gif,http://finance.sina.com.cn/money/future/quote.html?cu0902,futures"></div>
<div id="tab_11" class="default" config="日本胶,hf_TRB,http://image.sinajs.cn/newchart/v5/futures/global/mins/TRB.gif,http://finance.sina.com.cn/money/future/quote_hf.html?TRB,hk_futures|恒生指数期货,hf_HSI,http://image.sinajs.cn/newchart/v5/futures/global/mins/HSI.gif,http://finance.sina.com.cn/money/future/quote_hf.html?HSI,hk_futures"></div>
<div id="tab_12" class="default" config="美黄豆,hf_S,http://image.sinajs.cn/newchart/v5/futures/global/mins/S.gif,http://finance.sina.com.cn/money/future/quote_hf.html?S,hk_futures|美玉米,hf_C,http://image.sinajs.cn/newchart/v5/futures/global/mins/C.gif,http://finance.sina.com.cn/money/future/quote_hf.html?C,hk_futures"></div>
<div id="tab_13" class="default" config="伦铜,hf_CAD,http://image.sinajs.cn/newchart/v5/futures/global/mins/CAD.gif,http://finance.sina.com.cn/money/future/quote_hf.html?CAD,hk_futures|伦铝,hf_AHD,http://image.sinajs.cn/newchart/v5/futures/global/mins/AHD.gif,http://finance.sina.com.cn/money/future/quote_hf.html?AHD,hk_futures"></div>
</div>
</div>
</div>

Answer 2

最后是JavaScript部分(上)<script type="text/javascript">
var checkViewTable={"x":"-1","y":"-1","00":"0","01":"1","02":"2","03":"3","10":"4","11":"5","12":"6","13":"7","20":"-1","21":"-1","22":"8","23":"-1","30":"9","31":"-1","32":"-1","33":"-1","40":"10","41":"11","42":"12","43":"13"};
function $(id){return document.getElementById(id);}
function checkView(elem)
{
var arr=elem.id.split("_");
var dirc=arr[1];
var tag=arr[2];
if(elem.className!="default"){return;}
if(checkViewTable[checkViewTable["x"]+checkViewTable["y"]]!="-1")
{
$("tab_"+checkViewTable[checkViewTable["x"]+checkViewTable["y"]]).className="default";
}
var theother={"x":"y","y":"x","xcount":4,"ycount":5,"xid":"ti","yid":"it"};
var firstA="-1";
for(var i=0;i<theother[dirc+"count"];i++)
{
$("tab_"+theother[dirc]+"_"+i).className="default";
if(checkViewTable[theother[dirc+"id"].replace("t",tag).replace("i",i)]=="-1")
{
$("tab_"+theother[dirc]+"_"+i).className="disabled";
if(checkViewTable[theother[dirc]]==i)
{
checkViewTable[theother[dirc]]="-1";
}
}
else{firstA=i;}
}
if(checkViewTable[theother[dirc]]==-1) {checkViewTable[theother[dirc]]=firstA.toString();}
$("tab_"+theother[dirc]+"_"+checkViewTable[theother[dirc]]).className="active";
$("tab_"+dirc+"_"+checkViewTable[dirc]).className="default";
elem.className="active";
checkViewTable[dirc]=tag.toString();
$("tab_"+checkViewTable[checkViewTable["x"]+checkViewTable["y"]]).className="active";
if(tabSwitchController){tabSwitchController.load();}
}
function initView(arr)
{
checkViewTable["x"]=arr[0].toString();
$("tab_x_"+arr[0]).className="active";
checkViewTable["y"]=arr[1].toString();
$("tab_y_"+arr[1]).className="active";
$("tab_"+checkViewTable[arr.join("")]).className="active";
}
function processDataArray(data1,data2,data3,colors)
{
data3=isNaN(data3*1)?"--":(data3*1).toFixed(2);
if(data2*1>0){data2="+"+data2;data3='<span class="'+colors[0]+'">+'+data3+"%</span>";}
if(data2*1<0){data3='<span class="'+colors[1]+'">'+data3+"%</span>";}
return[data1,data2,data3];
}
function processData(config)
{
var colors=["green","red"];
switch(config[4]){
case "stock":
var data=window["hq_str_"+config[1]].split(",");
var data1=(data[3]*1).toFixed(2);
var data2=(data[3]-data[2]).toFixed(2);
var data3=(data[3]-data[2])*100/(data[2]*1);colors=["red","green"];
break;
case "int_":
var data=window["hq_str_"+config[1]].split(",");
var data1=data[1];
var data2=data[2];
var data3=data[3];
break;
case "int":
var data=window["hq_str_"+config[1]].split(",");
var data1=data[1];
var data2=data[2];
var data3=data[3];
break;
case "forex":
var data=window["hq_str_"+config[1]].split(",");
var data1=(data[8]*1).toFixed(4);
var data2=(data[8]-data[3]).toFixed(4);
var data3=(data[8]-data[3])*100/(data[3]*1);
break;
case "futures":
var data=window["hq_str_"+config[1]].split(",");
var data1=(data[8]*1).toFixed(2);
var data2=(data[8]-data[10]).toFixed(2);
var data3=(data[8]-data[10])*100/(data[10]*1);
break;
case "hk_futures":
var data=window["hq_str_"+config[1]].split(",");
var data1=(data[0]*1).toFixed(2);
var data2=(data[0]*1-data[7]*1).toFixed(2);
var data3=(data[0]*1-data[7]*1)*100/(data[7]*1);
break;
case "cffex":
var data=window["hq_str_"+config[1]].split(",");
var data1=(data[3]*1).toFixed(2);
var data2=(data[3]-data[14]).toFixed(2);
var data3=(data[3]-data[14])*100/(data[14]*1);
break;
default:
var data1="--";
var data2="--";
var data3="--";
}
return processDataArray(data1,data2,data3,colors);
}
</script>

Answer 3

这段是CSS 样式
只解释几行 其他的类似.tabss {background-color:#FFF; font-size:12px; width:320px;}
这个是 定义一个 名为tabss  的样式  background-color --背景色  font-size--字体大小（12像素） width--宽度
例如
<div class="tabss">dddddddddd</div>
这样使用后 div的背景色 就是 #FFF 这个颜色了  里头的字dddddddd 大小就是 12像素 这个div宽度就是320像素了。
.tabss .titleBar {border:1px solid #CCC; border-bottom-color:#CCC; background:url(http://i3.sinaimg.cn/dy/deco/2008/0324/yocc080324img/news_mj_001.gif) repeat-x 0px -650px; position:relative; height:25px;}这个 是在 tabss样式下 定义了个 titlebar样式 border:1px solid #CCC ---边框样式：宽1像素 实的 颜色为#ccc
border-bottom-color:#CCC --- 下边框 颜色 为#ccc
background:url(http://i3.sinaimg.cn/dy/deco/2008/0324/yocc080324img/news_mj_001.gif) repeat-x 0px -650px;
这个是背景图片 图片地址 是URL repeat-x 0px -650px; 这个是 背景图片的平铺 位置  和 方向 这里x 是横向平铺
.tabss .titleBar  比较 上一个 的区别是 在 tabss 下 titlebar 的样式才有效果。
比如
这个有效果
<div class="tabss">dddddddddd
<div class="titlebar">sfsdfsdfsdf</div>
</div>而 单独这个没有效果
<div class="titlebar">sfsdfsdfsdf</div>3层 N层类似。
完。PS :不是说200 么 怎么才100

Answer 4

最后是JavaScript部分(下)  var TabSwitchController=function(loader,targets)
{
this.elementLoader=loader;
this.loadHQ=function(target)
{
var element=document.createElement("script");
element.type="text/javascript";
element.charset="gb2312";
element.src="http://hq.sinajs.cn/rn="+(new Date()).getTime()+"&list="+target.list;
element.object=this;
element.target=target;
element[document.all?"onreadystatechange":"onload"]=function()
{
if(document.all&&this.readyState!="loaded"&&this.readyState!="complete"){return;}
var target=this.target;
for(var i=0;i<target.config.length;i++)
{
var data=processData(target.config[i]);
target.lines[i][1].innerHTML=data[0];
if(target.lines[i][2]){target.lines[i][2].innerHTML=data[1];}
target.lines[i][3].innerHTML=data[2];
}
this[document.all?"onreadystatechange":"onload"]=null;
this.parentNode.removeChild(this);
};
this.elementLoader.appendChild(element);
};
this.targets=targets;
this.load=function()
{
var object=arguments.callee.object;
var targets=object.targets;
for(var i=0;i<targets.length;i++)
{
var target=targets[i];
var config=target.getAttribute("config");
if(target.className=="active")
{
if(target.innerHTML=="")
{
var arrayConfig=config.split("|");
var targetTable=document.createElement("table");
targetTable.cellPadding=0;
targetTable.cellSpacing=0;
target.lines=[];
target.config=[];
target.list="";
if(arrayConfig.length>2)
{
targetTable.className="table";
targetTable.style.marginTop="8px";
for(var j=0;j<arrayConfig.length;j++)
{
var stockConfig=arrayConfig[j].split(",");
target.config.push(stockConfig);
target.list+=stockConfig[1]+",";
var tempTr1=targetTable.insertRow(-1);
tempTr1.className="current";
var tempName=tempTr1.insertCell(-1);
tempName.className="left";
tempName.colSpan=3;
var tempNameLink=document.createElement("a");
tempNameLink.target="_blank";
if(stockConfig[3])
{
tempNameLink.href=stockConfig[3];
}
tempNameLink.innerHTML=stockConfig[0];
tempName.appendChild(tempNameLink);
var tempTr2=targetTable.insertRow(-1);
var tempPrice=tempTr2.insertCell(-1);
var tempPriceVolume=tempTr2.insertCell(-1);
var tempPricePercent=tempTr2.insertCell(-1);
target.lines.push([tempTr,tempPrice,tempPriceVolume,tempPricePercent]);
}
target.appendChild(targetTable);
}
else
{
targetTable.className="table";
for(var j=0;j<arrayConfig.length;j++)
{
var stockConfig=arrayConfig[j].split(",");
target.config.push(stockConfig);
target.list+=stockConfig[1]+",";
var tempTr=targetTable.insertRow(-1);
tempTr.target=target;
if(stockConfig[2])
{
var tempImageLink=document.createElement("a");
tempImageLink.className="image";
tempImageLink.target="_blank";
if(stockConfig[3])
{
tempImageLink.href=stockConfig[3];
}
var tempImage=document.createElement("img");
tempImage.src=stockConfig[2]+"?"+(new Date()).getTime();
tempImage.linkElement=tempImageLink;
tempImageLink.appendChild(tempImage);
tempImageLink.style.display="none";
target.appendChild(tempImageLink);
tempTr.imageLink=tempImageLink;
tempTr.image=tempImage;
tempTr.style.cursor="pointer";
tempTr.thread=-1;
tempTr.switchLine=function()
{
var tr=arguments.callee.tr;
tr.thread=-1;
if(tr.target.currentLine)
{
tr.target.currentLine.className="";
tr.target.currentLine.imageLink.style.display="none";
if(!tr.image.last)
{
tr.image.last=(new Date()).getTime();
}
}
tr.className="current";
tr.imageLink.style.display="";
var rn=(new Date()).getTime();
if(rn-tr.image.last>30000)
{
tr.image.src=tr.image.src.replace(/\?\d*$/,"?"+rn);
tr.image.last=rn;
}
tr.target.currentLine=tr;
};
tempTr.switchLine.tr=tempTr;
tempTr.onmouseover=function()
{
this.thread=setTimeout(this.switchLine,200);
};
tempTr.onmouseout=function()
{
if(this.thread!=-1)
{
clearTimeout(this.thread);
}
};
}
var tempName=tempTr.insertCell(-1);
tempName.className="name";
var tempNameLink=document.createElement("a");
tempNameLink.target="_blank";
if(stockConfig[3])
{
tempNameLink.href=stockConfig[3];
}
tempNameLink.innerHTML=stockConfig[0];
tempName.appendChild(tempNameLink);
var tempPrice=tempTr.insertCell(-1);
var tempPricePercent=tempTr.insertCell(-1);
target.lines.push([tempTr,tempPrice,null,tempPricePercent,
(stockConfig[2]?tempImage:false)]);
}
target.appendChild(targetTable);
for(var j=0;j<target.lines.length;j++)
{
if(target.lines[j][0].image)
{
target.currentLine=target.lines[j][0];
target.currentLine.className="current";
target.currentLine.imageLink.style.display="";
break;
}
}
}
target.list=target.list.replace(/,$/,"");
object.loadHQ(target);
}
else
{
var now=new Date();
if(now.getSeconds()<30&&now.getMinutes()%3==0)
{
var rn=now.getTime();
for(var j=0;j<target.lines.length;j++)
{
if(target.lines[j][4]&&target.lines[j][4].linkElement.style.display=="")
{
target.lines[j][4].src=target.config[j][2]+"?"+rn;
target.lines[j][4].last=(new Date()).getTime();
}
}
}
object.loadHQ(target);
}
break;
}
}
};
this.load.object=this;
this.start=function()
{
this.load();
setInterval(this.load,30000);
}
}; var tabSwitchController=new TabSwitchController($("tabss_script_loader"),
[$("tab_0"),$("tab_1"),$("tab_2"),$("tab_3"),$("tab_4"),$("tab_5"),$("tab_6"),
$("tab_7"),$("tab_8"),$("tab_9"),$("tab_10"),$("tab_11"),$("tab_12"),$("tab_13")]);
initView([0,0]);
tabSwitchController.start();

Answer 5

张贴的速度间隔时间比较长，原因是不要被论坛怀疑恶意灌水而封号。将上述四块代码张贴在一起，是可以独立运行的，即可以从news.sina.com.cn分离出来<HTML>
 <HEAD>
  <TITLE> Sina </TITLE>
 </HEAD>
 <BODY>
<!--
  四块代码张贴于此
-->
 </BODY>
</HTML>这是一副动态显示金融行情的小窗口，吸引我的有几个原因：1、动态实时刷新行情；2、鼠标移到某行，就更新相应图片；3、鼠标移到某行，并加深所在行的颜色；4、使用选卡。对于其中的代码，虽然看了几本JavaScript的书，好像还有很多表达方法并没有见过，比如：$([])还有对this的理解，对无函数名function()的使用，将每个可能变成对象的元素的所有方法和属性。觉得还是有很多新东西，不知道那位高手对其中的关键部分从面向对象的角度加以注释。注释最好者独享200分，因为发帖最多只能给100，另100分只能明天加上。

Answer 6

如果能够完全吃透上述代码，应该算是进入JavaScript高手的行列了吧！

Answer 7

tabss {background-color:#FFF; font-size:12px; width:320px;} 
是个css样式

Answer 8

我晕哈，你不能理解的那部分是因为它用的像js库提供的方法啊用过jQuery就明白了当然jQeury不是免费的，sina应该是自己开发的类似于此功能的js库啊比如$("#id") == document.getElementById("ID");$("#ID").click(function()
{
alert(1);
}
);
这个代码效果等同于什么，自己猜吧。

Answer 9

"$" JS中对其进行了重载，相当于一个函数名：
function $(id){return document.getElementById(id);}
this代表对象的实例:
function 人(name,sex)
{
   this.姓名=name?name:"还没有名字"
   this.性别=sex?sex:"男";
}
var 我=new 人("我的名字","男");
此时，this就代表 “我” 这个实例，this.姓名 就代表 "我"的"姓名"
this.XXX=function()
这不是无名函数，这表示为类定义一个方法(method)（或叫函数）——公共方法(public)，可以如此调用：
类的实例名.XXX()
如果在类如此定义函数：
function XXX()
{
}
这是类的私有函数，不可如此调用：
类的实例名.XXX()