下記のソースは、所謂"マウスストーカー(時計)"を引き立たせるために
背景色と組み合わせたものですが、それぞれの背景色に応じて任意に
時計の文字色を変えられるようにしたいのですが、なかなかうまく
リンクできません(＊普通の文字は変わります)。
先日は"アナログ時計"を質問して解決したのですが、今回は"デジタル"時計です。
やり方は、"アナログ時計"の場合と違うようで、手こずっています。

それともう１つは、先日質問したアナログ時計のときに設定されていた
"clock on/offボタン"を、このデジタル時計にも設定したいのですが、
こちらもうまくリンクできません。

どこを，どのように書き換えればよいか、ご教示いただけませんでしょうか。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> 
<TITLE>デジタル時計 - JavaScript</TITLE>
<style type="text/css">
<!--
.css{
    font-size:16px; 
    font-weight:bold;       
}
//-->
</style>


<script type="text/javascript"> 
<!-- 
//
// 
function color1(){
    document.bgColor = "black";  
    document.fgColor = "gold"; 
}
// 
// 
function color2(){
    document.bgColor = "red";
    document.fgColor = "white";
}
// 
//
function color3(){
    document.bgColor = "white";
    document.fgColor = "blue";
}
//
// -->
</script>

<script type="text/javascript"><!--
msec=100;               //追従速度
fx=20;                  //表示位置ｘ座標
fy=-10;                 //表示位置y座標
fs=6;                   //文字の大きさ
fc="blue";              //文字色
F_face="Times New Roman";//フォント
//--------------------------------------

now=new Date();
(now.getHours()<10)?H="0"+now.getHours():H=now.getHours();
(now.getMinutes()<10)?M="0"+now.getMinutes():M=now.getMinutes();
(now.getSeconds()<10)?S="0"+now.getSeconds():S=now.getSeconds();

moji=H+":"+M+":"+S;

x=new Array();y=new Array();cnt = 0;
for (i=0; i<=moji.length; i++) {x[i] = -10;y[i] = -10; }
for(i=0;i<moji.length;i++){
document.write("<DIV style='position:absolute;z_index:2;top:-10px;left:-10px;'ID='Fonts"+i+"'><font face='"+F_face+"' size="+fs+" color="+fc+" ID='Time"+i+"'>"+moji.charAt(i)+"</font></DIV>");
}
function F_move(NNevent){
if(document.all){x[0]=event.x;y[0]=event.y;}else{
x[0]= NNevent.pageX;y[0]= NNevent.pageY;}
}
function F_run(){
for (i=moji.length-1; i>=0; i--){
if(i){x[i] = x[i-1]+fs*3;y[i] = y[i-1];}
if(document.all){
document.all("Fonts"+i).style.pixelTop=y[i]+fy+document.body.scrollTop;
document.all("Fonts"+i).style.pixelLeft=x[i]+fx+document.body.scrollLeft;
}else{
document.getElementById("Fonts"+i).style.top=y[i]+fy+"px";
document.getElementById("Fonts"+i).style.left=x[i]+fx+"px";
}
}}
setInterval('F_run()',msec);
document.onmousemove = F_move;

function nowtime(){
  now=new Date();
  (now.getHours()<10)?H="0"+now.getHours():H=now.getHours();
  (now.getMinutes()<10)?M="0"+now.getMinutes():M=now.getMinutes();
  (now.getSeconds()<10)?S="0"+now.getSeconds():S=now.getSeconds();
  moji=H+":"+M+":"+S;

  for(i=0;i<moji.length;i++){
     document.getElementById("Time"+i).innerHTML=moji.charAt(i);
  }
}
setInterval("nowtime()",1000);
// -->
</script>

</HEAD>

<BODY>

<Font size="5"><b>デジタル時計</b></font> 

<center><p>
<INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:
grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey 
1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;
FONT-FAMILY: ms gothic; BACKGROUND-COLOR: black"
onclick="color1();javascript:text.style.color='green'" 
type="button" value="
　">
<INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:
grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey
1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;
FONT-FAMILY: ms gothic; BACKGROUND-COLOR: red"
onclick="color2();javascript:text.style.color='blue'"
type="button" value="
　">
<INPUT style="BORDER-RIGHT: black 1px solid; BORDER-TOP:
black 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: black 1px
solid; COLOR: black; BORDER-BOTTOM: black 1px solid;
FONT-FAMILY: ms gothic; BACKGROUND-COLOR: white"
onclick="color3();javascript:text.style.color='gold'" 
type="button" value="
　">
</p></center>
<br><br><br><br><br><br><br><br>
<marquee class="css">背景色ボタンを、時計とリンクさせるには？<br><br>
<span id="text" style="font-size:30; color:green;">clock on/offボタン</span>を設定して、デジタル時計を消したり，現れるようにするには？
</marquee>

</BODY>
</HTML>