改變網頁顏色的JS調色板

dkg654 9年前發布 | 1K 次閱讀 JavaScript 

<script LANGUAGE="JavaScript">


var hex = new Array(6)<!--定義數組變量-->


hex[0] = "FF"
hex[1] = "CC"
hex[2] = "99"
hex[3] = "66"
hex[4] = "33"
hex[5] = "00"
function display(triplet) 
{
    document.bgColor = '#' + triplet<!--根據輸入的triplet，更新窗口的背景顏色-->
    alert('現在的背景顏色代碼是： ' + triplet)<!--彈出提示窗口-->
}
function drawCell(red, green, blue) 
{
    document.write('<TD BGCOLOR="#' + red + green + blue + '">')<!--定義小方格內的背景顏色-->
    document.write('<A HREF="javascript:display(\'' + (red + green + blue) + '\')">')<!--定義超鏈接，調用display函數-->
    document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12 WIDTH=12>')<!--引用圖片-->
    document.write('</A>')
    document.write('</TD>')
}
function drawRow(red, blue) 
{
    document.write('<TR>')
    for (var i = 0; i < 6; ++i) <!--循環6次-->
{
        drawCell(red, hex[i], blue)<!--一行6個小方格內部的顏色差別在于red和blue分量-->
    }
    document.write('</TR>')
}
function drawTable(blue) {
    document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')
    for (var i = 0; i < 6; ++i) {<!--循環6次-->
        drawRow(hex[i], blue)<!--每個表格總體的顏色差別在于藍色分量的不同-->
    }
    document.write('</TABLE>')

}
function drawCube() {
    document.write('<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>')
    for (var i = 0; i < 6; ++i) {
        document.write('<TD BGCOLOR="#FFFFFF">')<!--定義表格的背景顏色為白色-->
        drawTable(hex[i])<!--循環畫出每一個表格-->
        document.write('</TD>')
    }
    document.write('</TR></TABLE>')
}
drawCube()<!--直接調用drawCube()函數-->


</script>


<body>


單擊上面的調色板試試
</body>


</html>
<!--本例程實現了調色板的功能-->
<!--顏色的基本構成，以及調配方法-->
<!--超連接的使用-->
<!--彈出窗口的使用--></pre>
 本文由用戶 dkg654 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！