Random Color Page

載入網頁時隨機變換前背景色

隨機變換色彩

在 JavaScript 中要採用隨機方式決定一個數值，就一定要用到 Math.random() 這個函式。而要設定一個標籤中的色彩，就必須要依 HTML 的色彩設定格式來做，而 HTML 中的色彩字串是用兩個十六進位表示一個原色的數值，紅、綠、藍三原色就是用六個十六進位字符表示，如 "000000" 到 "FFFFFF" ，前面再加個 "#" 字符，就是完整的 HTML 色彩設定。例如本範例中隨機取得色彩值的函式是這樣：

/* 隨機取得十六進位色彩值函式 */
function randomColor()
{
    var result="";
    var hexString="0123456789ABCDEFG";

    for (var i=0;i<6;i++)
    {
        result+=hexString.charAt(parseInt(hexString.length*Math.random()));
    }
    return result;
}

如果隨機取色彩值問題已經解決了，那麼為網頁設定隨機背景色可就更簡單了，譬如你可以這樣：

document.write('<BODY BGCOLOR="#'+randomColor()+'">');

接下來的顯示問題

如果你以為這個問題就這樣解決了，事情可沒有這麼輕鬆喔，因為瀏覽器通常預設前景色(也就是文字的顏色)是黑色，如果你一個隨機選到了趨近於黑色的背景色，那整個網頁文字可就看不清，說不明了。所以最好是把前景色設為背景色的反相色，這樣有足夠的色差，就不會有無法顯示的狀況。本範例的反相色函式是：

/* 求一色值的反相色值函式
　 通常是希望把文字顏色和背景色定為反相色，以利閱讀。
   color 參數是反相依據的色值字串 */
function reverseColor(color)
{
    var result="";
    var temp=0;
    var hexString="0123456789ABCDEFG";

    /* 逐一取出每個字符加以反相 */
    for (var i=0;i<color.length;i++)
    {
        /* 因為是十六進位，所以必須加 "0x" 前置字符。 */
        temp=parseInt("0x"+color.charAt(i));
        result+=hexString.charAt(16-temp-1);
    }
    return result;
}

所以這時我們的 BODY 標籤就要同時做 BGCOLOR 和 TEXT 的色彩設定：

/* 背景色 */
var bColor="";
/* 前景色 */
var tColor="";

/* 隨機取得背景色 */
bColor=randomColor();
/* 把背景色反相當做前景色 */
tColor=reverseColor(bColor);

document.write('<BODY BGCOLOR="#'+randomColor()+'">');

聯結標籤的問題

如文字顏色要考慮到和背景色配合問題，那麼聯結標籤的文字顏色應該也是要能配合才對，為了和前景背景色有所區別，而三種聯結狀態色彩值又不能重覆，因此我採用 Link Color 比 TextColor 色度稍弱化些，VLink Color 則再弱化些，而 ALinkColor 則是 TextColor 的更強化。當然如果這樣的效果你並不滿意，當然你可以建立自己的規則來使用。本範例的聯結標籤色彩設定如下：

/* 依前景色背景色換算 link,alink,vlink 色彩函式
   bc   參數:背景色
   tx   參數:前景色
   mode 參數:選擇運算那一種聯結色彩 */
function reverseLinkColor(bc,tc,mode)
{
    /* 聯結模式選擇常數宣告 */
    var LINK_COLOR=0,ALINK_COLOR=1,VLINK_COLOR=2;

    var result="";
    var hexString="0123456789ABCDEFG";
    var off,b,t;

    for (var i=0;i<bc.length;i++)
    {
        b=parseInt("0x"+bc.charAt(i));
        t=parseInt("0x"+tc.charAt(i));

        /* 減弱前景色強度 */
        if (mode==LINK_COLOR) {off=(t>b)?t-2:t+2;}
        /* 增加前景色強度 */
        if (mode==ALINK_COLOR) {off=(t>b)?t+2:t-2;}
        /* 進一步減弱前景色強度 */
        if (mode==VLINK_COLOR) {off=(t>b)?t-4:t+4;}
        /* 不使最後 off 值超出 0~15 之合法範圍 */
        if (off<0) {off=0;}
        if (off>15) {off=15;}
        result+=hexString.charAt(off);
    }
    return result;
}

當然這時 BODY 標籤就要增加 link,alink,vlink 三個性質的設定，本範例是這麼做的：

/* 背景色 */
var bColor="";
/* 前景色 */
var tColor="";
/* 一般聯結顏色 */
var lColor="";
/* 作用中的聯結顏色 */
var aColor="";
/* 查閱過的聯結顏色 */
var vColor="";

/* 各代表設定變數取得其色值 */
bColor=randomColor();
tColor=reverseColor(bColor);
lColor=reverseLinkColor(bColor,tColor,0);
aColor=reverseLinkColor(bColor,tColor,1);
vColor=reverseLinkColor(bColor,tColor,2);

/* 準備全網頁色彩設定輸出字串 */
var colorSetString=' BGCOLOR="#'+bColor+'"';
colorSetString+=' TEXT="#'+tColor+'"';
colorSetString+=' LINK="#'+lColor+'"';
colorSetString+=' ALINK="#'+aColor+'"';
colorSetString+=' VLINK="#'+vColor+'"';

/* 一次輸出所有的色彩設定 */
document.write("<BODY"+colorSetString+">");

其他注意事項

本範例只能在載入時及重新整理時發揮作用，若是載入完成後要由瀏覽者動態變更網頁色彩，若是 IE 可以利用 style 物件的 background-color 屬性，但因為 NN 不支援 style 動態樣式物件，雖然說可以透過 layer.document 改寫元件來做，但卻不太可能把整個 BODY 的設定換掉，所以啟用框架組，讓背景 frame 來驅動前景 frame 的改寫，似乎是比較可行的方法。
其實完全隨機雖然讓人感覺新鮮，但未必會配出令人賞心悅目的色彩，所以事先配好十到二十組色彩組，把它們放入 Script 的陣列物件中，再用 Math.random() 方法選出一組來顯示，我想才是一個又能維持新鮮感，又能兼顧良好顯示效果的辦法。因為本範例只是在顯示 JavaScript 的操作隨機色彩的方式，就不提供配色方法了。

範例測試: 好了，哈啦一堆，在你失去耐性前，我們還是來試試範例頁效果吧，你可以按這裡開啟範例網頁後，重覆的按範例頁的重新整理按鈕，來看每次載入時不同的色彩設定。

回前頁