Sample Source......................................................................>>>

<script language="JavaScript"><!--
var c;            //色の初期値
var dc;            //色値の変化量
var tds = document.all.tags("td"); //<td>ﾀｸﾞのｺﾚｸｼｮﾝを作る;
var i;            //<td>ﾀｸﾞのｺﾚｸｼｮﾝのindex番号
var timerID;

function Gra(g){    //各色のﾎﾞﾀﾝをｸﾘｯｸ
    if(event.shiftKey && g == 1)Color(1,0);
    else if(g == 1)Color(1,1);
    if(event.shiftKey && g == 2)Color(2,0);
    else if(g == 2)Colorl(2,1);
    if(event.shiftKey && g == 3)Color(3,0);
    else if(g == 3)Color(3,1);
    if(event.shiftKey && g == 4)Color(4,0);
    else if(g == 4)Color(4,1);
    if(event.shiftKey && g == 5)Color(5,0);
    else if(g == 5)Color(5,1);
    if(event.shiftKey && g == 6)Color(6,0);
    else if(g == 6)Color(6,1);
    if(event.shiftKey && g == 7)Color(7,0);
    else if(g == 7)Color(7,1);
}

function Color(n,s){
    i = 0;
    if(s == 0){        //[Shift]ｷｰが押されている場合
        c = 250;    //白色から変化を開始する
        dc = -5;
    }else{   
        c = 5;
        dc = 5;
    }

    if(n == 1)Black(); //以下、押されたﾎﾞﾀﾝにより分岐
    else if(n == 2)Red();
    else if(n == 3)Green();
    else if(n == 4)Blue();
    else if(n == 5)Yellow();
    else if(n == 6)Magenta();
    else if(n == 7)Water();
}

function Black(){    //黒色のｸﾞﾗﾃﾞｰｼｮﾝ
    cc = c.toString(16);         //16進数に変換
    if(cc.length<2)cc = "0" + cc; //1桁の場合は0を付ける
   
    dv.style.backgroundColor = "#" + cc + cc + cc;
    tds[i].style.backgroundColor = "#" + cc + cc + cc;

    if(c > 250 || c < 5){
        clearTimeout(timerID);
        alert("終了しました!!");
    }else{
        timerID = setTimeout("Black()",200);
        c += dc;
        i++;
    }
}
function Red(){        //赤色のｸﾞﾗﾃﾞｰｼｮﾝ
    cc = c.toString(16);        //16進数に変換
    if(cc.length<2)cc = "0" + cc; //1桁の場合は0を付ける    
    dv.style.backgroundColor = "#ff" + cc + cc ;
    tds[i].style.backgroundColor = "#ff" + cc + cc ;

    if(c > 250 || c < 5){
        clearTimeout(timerID);
        alert("終了しました!!");
    }else{
        timerID = setTimeout("Red()",200);
        c += dc;
        i++;
    }
}
function Green(){    //緑色のｸﾞﾗﾃﾞｰｼｮﾝ
    cc = c.toString(16);        //16進数に変換
    if(cc.length<2)cc = "0" + cc; //1桁の場合は0を付ける    
    dv.style.backgroundColor = "#" + cc + "ff" + cc ;
    tds[i].style.backgroundColor = "#" + cc + "ff" + cc ;

    if(c > 250 || c < 5){
        clearTimeout(timerID);
        alert("終了しました!!");
    }else{
        timerID = setTimeout("Green()",200);
        c += dc;
        i++;
    }
}
function Blue(){    //青色のｸﾞﾗﾃﾞｰｼｮﾝ
    cc = c.toString(16);        //16進数に変換
    if(cc.length<2)cc = "0" + cc; //1桁の場合は0を付ける    
    dv.style.backgroundColor = "#" + cc + cc + "ff";
    tds[i].style.backgroundColor = "#" + cc + cc + "ff";

    if(c > 250 || c < 5){
        clearTimeout(timerID);
        alert("終了しました!!");
    }else{
        timerID = setTimeout("Blue()",200);
        c += dc;
        i++;
    }
}
function Yellow(){         //黄色のｸﾞﾗﾃﾞｰｼｮﾝ
    cc = c.toString(16);        //16進数に変換
    if(cc.length<2)cc = "0" + cc; //1桁の場合は0を付ける    
    dv.style.backgroundColor = "#ffff" + cc;
    tds[i].style.backgroundColor = "#ffff" + cc;

    if(c > 250 || c < 5){
        clearTimeout(timerID);
        alert("終了しました!!");
    }else{
        timerID = setTimeout("Yellow()",200);
        c += dc;
        i++;
    }
}
function Magenta(){         //紫色のｸﾞﾗﾃﾞｰｼｮﾝ
    cc = c.toString(16);        //16進数に変換
    if(cc.length<2)cc = "0" + cc; //1桁の場合は0を付ける    
    dv.style.backgroundColor = "#ff" + cc + "ff";
    tds[i].style.backgroundColor = "#ff" + cc + "ff";

    if(c > 250 || c < 5){
        clearTimeout(timerID);
        alert("終了しました!!");
    }else{
        timerID = setTimeout("Magenta()",200);
        c += dc;
        i++;
    }
}
function Water(){    //水色のｸﾞﾗﾃﾞｰｼｮﾝ
    cc = c.toString(16);        //16進数に変換
    if(cc.length<2)cc = "0" + cc; //1桁の場合は0を付ける    
    dv.style.backgroundColor = "#" + cc + "ffff";
    tds[i].style.backgroundColor = "#" + cc + "ffff";

    if(c > 250 || c < 5){
        clearTimeout(timerID);
        alert("終了しました!!");
    }else{
        timerID = setTimeout("Water()",200);
        c += dc;
        i++;
    }
}
//--></script>
</head>

<body>
<div id="dv" style="width:200;height:50;
    border:thin solid"></div>

<table width="80%" height="20">
    <tr>
        <td></td>
        <td></td>
        ･･(省略)･･･
        <td></td>
    </tr>
</table>

<button onclick="Gra(1);">黒のｸﾞﾗﾃﾞｰｼｮﾝ</button>
<button onclick="Gra(2);">赤のｸﾞﾗﾃﾞｰｼｮﾝ</button><br>
<button onclick="Gra(3);">緑のｸﾞﾗﾃﾞｰｼｮﾝ</button>
<button onclick="Gra(4);">青のｸﾞﾗﾃﾞｰｼｮﾝ</button><br>
<button onclick="Gra(5);">黄のｸﾞﾗﾃﾞｰｼｮﾝ</button>
<button onclick="Gra(6);">紫のｸﾞﾗﾃﾞｰｼｮﾝ</button><br>
<button onclick="Gra(7);">水色のｸﾞﾗﾃﾞｰｼｮﾝ</button>