0

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

それともう1つは、先日質問したアナログ時計のときに設定されていた
"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;                  //表示位置x座標
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>
3
  • ソースコードを貼り付ける際は、その部分を選択して {} と書かれたボタンをクリックしていただくと、HTML等もそのまま表示されるようになります。今回は私が修正してしまいましたが、次回投稿される際はぜひお試しください。
    – unarist
    Commented 2015年4月19日 5:23
  • 修正していただき、ありがとうございました。 おかしいな、と思っていたら、いつの間にか原文通りに なっていましたので、不思議に思っていました。 次回からは、気をつけます。
    – user9359
    Commented 2015年4月19日 5:43
  • 1
    こういうプログラム作成依頼を許容するのは良くないと思うけどなあ
    – プリン
    Commented 2015年4月19日 12:40

2 件の回答 2

1

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

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 を設定するだけです。

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");
}

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

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;
}
<span id="text" style="font-size:30; color:green;"
 onclick="toggleClock();">clock on/offボタン</span>

4. 表示例

<!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;                  //表示位置x座標
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>

4
  • 回等ありがとうございました。 背景色ボタンと時計が、うまくリンクされていました。 ”setTimeColors”という語句は、初めて見ました。 Javascriptは、奥深いですね。 onclick="color1();javascript:text.style.color='~'"の部分は、document.getElementById('text')と()内に指定したidを入れるのですね。 勉強になります。いろいろ試した末、やっとうまく機能して喜んでいたのですが…(笑) 1つ疑問がありますが、"clock on/offボタン"は"marquee"タグ内に 入れられていて、"clock on/off"という文字がボタンとして設定されている ようですが…
    – user9359
    Commented 2015年4月19日 12:37
  • setTimeColors という識別子は JavaScript の識別子ではありません! function setTimeColors() { ... } によって 自分でつけた関数名 です。
    – akinomyoga
    Commented 2015年4月19日 13:44
  • 「"clock on/offボタン"は"marquee"タグ内に 入れられていて、"clock on/off"という文字がボタンとして設定されている」 その通りです。今回は "clock on/offボタン" を含む要素に対して onclick="toggleClock();" を指定したのでその様になっています。もちろん、別の場所に onclick を設定する事も可能です。
    – akinomyoga
    Commented 2015年4月19日 13:48
  • 最後に、ボタンにしましたら、"clock off"⇔"clock on"と切り替えて表示 できませんので、 <center><p> <input type="button" value="clock off/on" onClick="toggleClock();"> </p></center> と誤魔化すことにしました(笑) 素人の私にとって、まさに"javascript=暗号"です。 ありがとうございました。
    – user9359
    Commented 2015年4月20日 18:12
0

配色の変更はCSSの切替で

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

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

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

<!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;                  //表示位置x座標
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>

1
  • 回等ありがとうございました。 こちらも背景色ボタンと時計が、うまくリンクされていました。 やり方は、いろいろあるみたいですね。 本当に奥深いです。勉強になりました。
    – user9359
    Commented 2015年4月19日 12:54

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。