9306


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

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

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

[code]

    <!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>
    
[/code]


CC BY-SA 3.0
2015-04-19T05:02:29.997
9299
2015-05-19T11:25:14.597
2015-04-19T05:19:50.877
8000
9359
question
javascript html
背景色に応じて、時計(の針，など)の色を変えるには？(２)


そもそもの全体的な構造からしてより良い方法があるように思いますが、取り敢えず書き換えを最小にする方向で書きます。

**1. 既存部分の問題点**

  * `document.write("<DIV style='position:absolute;z_index:2;top:-10px;left:-10px;'ID='Fonts"+i+以下略`  
・`ID=` の前に空白が抜けています。

  * `onclick="color1();javascript:text.style.color='～'"` について  
・`javascript:` は不要です。`javascript:` は `href` 等の本来 URL
を記入する所にスクリプトを記述する為に用いるものです。  
・`text` ではなく(要素に指定したidを直接指定するのではなく)、`document.getElementById('text')`
等として下さい。そうしないと Internet Explorer 以外で動きません。

**2. 時計の文字色を変える**  
`color1()` `color2()` `color3()` の中で `id="Time番号"` の要素に対して `style.color`
を設定するだけです。

[code]

    function setTimeColors(color){
      if(moji){
        for(var i=0;i<moji.length;i++){
          var elem=document.getElementById("Time"+i);
          if(elem)elem.style.color=color;
        }
      }
    }
    function color1(){
      document.bgColor = "black";  
      document.fgColor = "gold";
      setTimeColors("gold");
    }
    function color2(){
      document.bgColor = "red";
      document.fgColor = "white";
      setTimeColors("white");
    }
    function color3(){
      document.bgColor = "white";
      document.fgColor = "blue";
      setTimeColors("blue");
    }
    
[/code]

**3. clock on/offボタン**  
[clock on/off ボタン] の `onclick` に clock on/off する為の関数 (ここでは `toggleClock` とする)
を指定すれば良いです。`toggleClock` では `id="Fonts番号"` の要素について style.display を指定すれば良いです。

[code]

    var isClockOn=true;
    function toggleClock(){
      isClockOn=!isClockOn;
      var displayValue=isClockOn?"block":"none";
      for(var i=0;i<moji.length;i++)
        document.getElementById("Fonts"+i).style.display=displayValue;
    }
    
[/code]

[code]

    <span id="text" style="font-size:30; color:green;"
     onclick="toggleClock();">clock on/offボタン</span>
    
[/code]

**4. 表示例**  

[code]

    <!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 setTimeColors(color){
      if(moji){
        for(var i=0;i<moji.length;i++){
          var elem=document.getElementById("Time"+i);
          if(elem)elem.style.color=color;
        }
      }
    }
    function color1(){
      document.bgColor = "black";  
      document.fgColor = "gold";
      setTimeColors("gold");
    }
    function color2(){
      document.bgColor = "red";
      document.fgColor = "white";
      setTimeColors("white");
    }
    function color3(){
      document.bgColor = "white";
      document.fgColor = "blue";
      setTimeColors("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);
    
    var isClockOn=true;
    function toggleClock(){
      isClockOn=!isClockOn;
      var displayValue=isClockOn?"block":"none";
      for(var i=0;i<moji.length;i++)
        document.getElementById("Fonts"+i).style.display=displayValue;
    }
    // -->
    </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();document.getElementById('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();document.getElementById('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();document.getElementById('text').style.color='gold'" 
    type="button" value="
    　">
    </p></center>
    <br><br><br><br>
    <marquee class="css">背景色ボタンを、時計とリンクさせるには？<br><br>
    <span id="text" style="font-size:30; color:green;" onclick="toggleClock();">clock on/offボタン</span>を設定して、デジタル時計を消したり，現れるようにするには？
    </marquee>
    
    </BODY>
    </HTML>
[/code]


CC BY-SA 3.0
2015-04-19T08:28:57.073
9306
2015-04-19T10:32:39.967
2015-04-19T10:32:39.967
5300
5300
9299
answer


**配色の変更はCSSの切替で**

全く別の方針として CSS の切り替えによる方法もありますので別項目で投稿します。  
状況に応じて配色・表示/非表示などを変更するのであれば、

  1. 親要素 (body 等) のクラス名を指定してCSSを記述
  2. スクリプトで `親要素.className` を書き換えることによって切り替え

とするのが見通しが良いかと思います。以下の例を御覧下さい。

[code]

    <!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;       
    }
    
    input.themeButton {
        border: grey 1px solid; 
        font-size: 8pt;
        color: black;
        font-family: "MS Gothic";
    }
    div.timeChar{
        position:absolute;z_index:2;top:-10px;left:-10px;
        font-family:"Times New Roman";font-size:32px;color:blue;
    }
    span.toggleButton{
        font-size:120%;color:green;
    }
    /* 配色1 */
    .theme1{background-color:black;color:gold;}
    .theme1 div.timeChar{color:gold;}
    .theme1 span.toggleButton{color:green;}
    /* 配色2 */
    .theme2{background-color:red;color:white;}
    .theme2 div.timeChar{color:white;}
    .theme2 span.toggleButton{color:blue;}
    /* 配色3 */
    .theme3{background-color:white;color:blue;}
    .theme3 div.timeChar{color:blue;}
    .theme3 span.toggleButton{color:gold;}
    
    /* clock off */
    div.hiddenClock{display:none;}
    //-->
    </style>
    
    <script type="text/javascript"> 
    <!--
    var msec=100;               //追従速度
    var fx=20;                  //表示位置ｘ座標
    var fy=-10;                 //表示位置y座標
    var fs=6;                   //文字の大きさ
    //--------------------------------------
    function setTheme(theme){
      document.body.className=theme;
    }
    
    function padLeft(text,width,ch){
      text=text.toString();
      while(text.length<width)text=ch+text;
      return text;
    }
    function getDisplayTime(){
      var now=new Date();
      var H=padLeft(now.getHours(),2,"0");
      var M=padLeft(now.getMinutes(),2,"0");
      var S=padLeft(now.getSeconds(),2,"0");
      return H+":"+M+":"+S;
    }
    
    var moji=getDisplayTime();
    var x=[], y=[], cnt=0;
    for(var i=0; i<=moji.length; i++) x[i] = y[i] = -10;
    
    document.write('<div id="clockContainer">');
    for(var i=0;i<moji.length;i++){
      document.write("<div class='timeChar' id='Fonts"+i+"'>"+moji.charAt(i)+"</div>");
    }
    document.write('</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(var i=moji.length-1; i>=0; i--){
        if(i){x[i] = x[i-1]+fs*3; y[i] = y[i-1];}
        if(document.all){
          var elem=document.all("Fonts"+i);
          elem.pixelTop=y[i]+fy+document.body.scrollTop;
          elem.pixelLeft=x[i]+fx+document.body.scrollLeft;
        }else{
          var elem=document.getElementById("Fonts"+i);
          elem.style.top=y[i]+fy+"px";
          elem.style.left=x[i]+fx+"px";
        }
      }
    }
    setInterval('F_run()',msec);
    document.onmousemove = F_move;
    
    function updateTime(){
      var moji=getDisplayTime();
      for(var i=0;i<moji.length;i++)
        document.getElementById("Fonts"+i).innerHTML=moji.charAt(i);
    }
    setInterval(updateTime,1000);
    
    var isClockOn=true;
    function toggleClock(){
      isClockOn=!isClockOn;
      document.getElementById("clockContainer").className
        =isClockOn?"shownClock":"hiddenClock";
    }
    // -->
    </script>
    </head>
    <body>
    
    <font size="5"><b>デジタル時計</b></font> 
    
    <center><p>
    <input class="themeButton" style="background-color: black"
    onclick="setTheme('theme1');" 
    type="button" value="
    　" />
    <input class="themeButton" style="background-color: red"
    onclick="setTheme('theme2');" 
    type="button" value="
    　" />
    <input class="themeButton" style="border-color: black; background-color: white"
    onclick="setTheme('theme3');" 
    type="button" value="
    　" />
    </p></center>
    <br><br><br>
    <marquee class="css">背景色ボタンを、時計とリンクさせるには？<br>
    <span id="text" class="toggleButton" onclick="toggleClock();">clock on/offボタン</span>を設定して、デジタル時計を消したり，現れるようにするには？
    </marquee>
    
    </body>
    </html>
[/code]


CC BY-SA 3.0
2015-04-19T09:46:08.020
9308
2015-04-19T09:46:08.020
5300
9299
answer