背景顏色測(cè)試JS代碼怎么寫(xiě)

2012/11/2 11:18:23作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱(chēng)】

背景顏色測(cè)試JS代碼

【實(shí)例描述】

頁(yè)面的顏色搭配一直是個(gè)難題。要想讓頁(yè)面的顏色視覺(jué)效果更好．可以使用本例提供的顏色測(cè)試代碼。

【實(shí)例代碼】

 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>無(wú)標(biāo)題頁(yè)-學(xué)無(wú)憂（wangbatian.cn）</title>
    <SCRIPT language=javascript>
    
    function makeArray(q)
    {
        for(i=1;i<=q;i++){this[i]=0} //初始化數(shù)組
    }
    Colors=new makeArray(7);
        Colors[1]="00";Colors[2]="33";Colors[3]="66";
        Colors[4]="99";Colors[5]="CC";Colors[6]="FF";
    </SCRIPT>
</head>
<body>
 <center>
<table cellspacing="0" cellpadding="0">
<SCRIPT language=javascript>
//使用循環(huán)實(shí)現(xiàn)顏色的分段顯示
for(i=1;i<=6;i++){
   for(j=1;j<=6;j++){
      for(k=1;k<=6;k++){
           var thiscolor=Colors[i]+Colors[j]+Colors[k];
           document.writeln("<tr><td height=20 
bgcolor =\"#" + thiscolor + "\" align = right><a href = ");
           document.writeln("\'\' 
onMouseOver = \"document.bgColor=\'"+thiscolor+"\'\">"
        +thiscolor+"</a></td></tr>");}}}
</SCRIPT>
</table></center>
</body>
</html>s

【運(yùn)行效果】

背景顏色測(cè)試運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)在于如何通過(guò)循環(huán)顯示所有的顏色。用戶將鼠標(biāo)移動(dòng)到顏色標(biāo)碼處，頁(yè)面的背景色就會(huì)發(fā)生變化。本例的技巧是使用數(shù)組保存了顏色的16進(jìn)制代碼，這樣可以在頁(yè)面中顯示顏色對(duì)應(yīng)的16進(jìn)制值。
【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：背景顏色測(cè)試進(jìn)行本實(shí)例源碼下載

標(biāo)簽：背景顏色 JS代碼

相關(guān)文章