1

はじめまして。

下記のソースは、所謂"マウスストーカー(時計)"を引き立たせるために
背景色と組み合わせたものですが、それぞれの背景色に応じて任意に
"date color"・"face color"・"hours color・"minutes color・
"seconds color”を変えられるようにしたいのですが、なかなか
うまくリンクできません(*普通の文字は、変わります)。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> 

<TITLE>Magical clock - JavaScript</TITLE>

<style type="text/css">
<!--
.butt{
BACKGROUND:maroon; COLOR:gold;
}
.css1{
position:absolute;top:0px;left:0px;
width:19px;height:19px;
font-family:Arial,sans-serif;
font-size:19px;
text-align:center;
font-weight:bold;
}
.css2{
 position:absolute;top:0px;left:0px;
width:13px;height:13px;
font-family:Arial,sans-serif;
font-size:13px;
text-align:center;
}
//-->
</style>

<script type="text/javascript"> 
<!-- //
// 
function color1(){
document.bgColor = "black";  
document.fgColor = "gold"; 
}
// 
// 
function color2(){
document.bgColor = "darkgreen";
document.fgColor = "pink";
}
//
//
function color3(){
document.bgColor = "#ff99ff";
document.fgColor = "green";
}
//
// -->
</script>
</HEAD>
 
<BODY>

<p><FONT size="5"><B>魔法の時計</B></FONT></p>
<br><br><br><br><br><br><br><br>

<script language="JavaScript"> 
<!-- 
//
if (document.getElementById&&!document.layers){
// *** Clock colours
dCol='blue';   //date colour.
fCol='pink';   //face colour.
sCol='yellow';   //seconds colour.
mCol='red';   //minutes colour.
hCol='red';   //hours colour.
 
// *** Controls
del=0.6;  //Follow mouse speed.
ref=40;   //Run speed (timeout).
//  
var ieType=(typeof window.innerWidth != 'number');
var docComp=(document.compatMode);
var docMod=(docComp && docComp.indexOf("CSS") != -1);
var ieRef=(ieType && docMod)
?document.documentElement:document.body;
theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900; 
tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year;
D=tmpdate.split("");
N='3 4 5 6 7 8 9 10 11 12 1 2';
N=N.split(" ");
F=N.length;
H='☆☆☆☆';
H=H.split("");
M='☆☆☆☆☆';
M=M.split("");
S='-----';
S=S.split("");
siz=65;
eqf=360/F;
eqd=360/D.length;
han=siz/5.5;
ofy=-7;
ofx=-3;
ofst=70;
tmr=null;
vis=true;
mouseY=0;
mouseX=0;
dy=new Array();
dx=new Array();
zy=new Array();
zx=new Array();
tmps=new Array();
tmpm=new Array(); 
tmph=new Array();
tmpf=new Array(); 
tmpd=new Array();
var sum=parseInt(D.length+F+H.length+M.length+S.length)+1;
for (i=0; i < sum; i++){
dy[i]=0;
dx[i]=0;
zy[i]=0;
zx[i]=0;
}
 
algn=new Array();
for (i=0; i < D.length; i++){
algn[i]=(parseInt(D[i]) || D[i]==0)?10:9;
document.write('<div id="_date'+i+'" class="css2" style="color:'+dCol+'">'+D[i]+'<\/div>');
tmpd[i]=document.getElementById("_date"+i).style;
}
for (i=0; i < F; i++){
document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'<\/div>');
tmpf[i]=document.getElementById("_face"+i).style; 
}
for (i=0; i < H.length; i++){
document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'<\/div>');
tmph[i]=document.getElementById("_hours"+i).style;
}
for (i=0; i < M.length; i++){
document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'<\/div>');
tmpm[i]=document.getElementById("_minutes"+i).style; 
}
for (i=0; i < S.length; i++){
document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'<\/div>');
tmps[i]=document.getElementById("_seconds"+i).style;         
}

 
function onoff(){
if (vis){ 
 vis=false;
 document.getElementById("control").value="Clock On";
 }
else{ 
 vis=true;
 document.getElementById("control").value="Clock Off";
 Delay();
 }
kill();
}
 
function kill(){
if (vis) 
 document.onmousemove=mouse;
else 
 document.onmousemove=null;
} 
 
function mouse(e){
var msy = (!ieType)?window.pageYOffset:0;
if (!e) e = window.event;    
 if (typeof e.pageY == 'number'){
  mouseY = e.pageY + ofst - msy;
  mouseX = e.pageX + ofst;
 }
 else{
  mouseY = e.clientY + ofst - msy;
  mouseX = e.clientX + ofst;
 }
if (!vis) kill();
}
document.onmousemove=mouse;
 
function winDims(){
winH=(ieType)?ieRef.clientHeight:window.innerHeight; 
winW=(ieType)?ieRef.clientWidth:window.innerWidth;
}
winDims();
window.onresize=new Function("winDims()");
 
function ClockAndAssign(){
time = new Date();
secs = time.getSeconds();
sec = Math.PI * (secs-15) / 30;
mins = time.getMinutes();
min = Math.PI * (mins-15) / 30;
hrs = time.getHours();
hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;
 
for (i=0; i < S.length; i++){
 tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";
 tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px";
 }
for (i=0; i < M.length; i++){
 tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";
 tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";
 }
for (i=0; i < H.length; i++){
 tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";
 tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";
 }
for (i=0; i < F; i++){
 tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";
 tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";
 }
for (i=0; i < D.length; i++){
 tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";
 tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";
 }
if (!vis)clearTimeout(tmr);
}
 
buffW=(ieType)?80:90;
function Delay(){
scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset;
if (!vis){
 dy[0]=-100;
 dx[0]=-100;
}
else{
 zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del);
 zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del);
}
for (i=1; i < sum; i++){
 if (!vis){
  dy[i]=-100;
  dx[i]=-100;
 }
 else{
  zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
  zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);
 }
if (dy[i-1] >= winH-80) dy[i-1]=winH-80;
if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;
}
 
tmr=setTimeout('Delay()',ref);
ClockAndAssign();
}
window.onload=Delay;
}
//-->
</script> 

<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()" 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: darkgreen"
onClick="color2()" 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: #ff99ff"
onClick="color3()" type="button" value="
 "> 
</p></center>
<br><br><br>

<center><p>
<script type="text/javascript"> 
<!-- Mouse Clock Button
//Hide from older browsers 
if (document.getElementById&&!document.layers){
document.write('<input class=butt type="button" id="control" value="Clock Off" onClick="this.blur();onoff()"></span>');
}
//-->
</script>
</p></center>
</BODY>
</HTML>

2 件の回答 2

2

日付部分にフォーカスして回答します。

日付部分の色は以下のコードで指定されています。

dCol='blue';   //date colour.

dColを使っているのは以下のコードです。

document.write('<div id="_date'+i+'" class="css2" style="color:'+dCol+'">'+D[i]+'<\/div>');

どうやら上記のコードでHTMLを書き出して日付部分を表示していることがわかりました。
そして、ご丁寧にidが指定されていますので、以下のようなコードで文字色を変えることができるだろうというアタリをつけることができます。

document.getElementById('_date0').style.color = "white";

idの数字部分は0からD.length - 1までのようなので以下のように書けます。

for (var i = 0; i < D.length; i++) {
    document.getElementById('_date' + i).style.color = "white";
}

このようなコードをcolor1関数などに入れることでご希望のことができるかと思います。

途中までですが、ここまでのことを整理したコードをjsdo.itに載せておきましたので、ご参考にしてみてください。
http://jsdo.it/blueberrystream/qBF2Internet Archive

1
  • 回答をありがとうございました。 うまく時計と背景色ボタンがリンクされていました。 これで、スッキリしました! 似たようなことを試していたのですが、知識不足でいまいち踏み込みが 足りませんでした(笑) やり方は、幾通りかあるようですね。 ちなみに、最後の段落(clock off[on])で、なぜか余分な</span>が 混ざっていました。
    – user9359
    Commented 2015年4月17日 14:37
1

背景色が変更された際に、各色を更新するようにしてみました。
こんな感じで良いでしょうか。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> 

<TITLE>Magical clock - JavaScript</TITLE>

<style type="text/css">
<!--
.butt{
BACKGROUND:maroon; COLOR:gold;
}
.css1{
position:absolute;top:0px;left:0px;
width:19px;height:19px;
font-family:Arial,sans-serif;
font-size:19px;
text-align:center;
font-weight:bold;
}
.css2{
 position:absolute;top:0px;left:0px;
width:13px;height:13px;
font-family:Arial,sans-serif;
font-size:13px;
text-align:center;
}
//-->
</style>

<script type="text/javascript"> 
<!-- //
// 
function color1(){
document.bgColor = "black";  
document.fgColor = "gold";

//+++add zakk3456
dCol = 'white';   //date colour.
fCol = 'white';   //face colour.
sCol = 'white';   //seconds colour.
mCol = 'white';   //minutes colour.
hCol = 'white';   //hours colour.
changeColor();
//---add zakk3456
}
// 
// 
function color2(){
document.bgColor = "darkgreen";
document.fgColor = "pink";

//+++add zakk3456
dCol = 'red';   //date colour.
fCol = 'red';   //face colour.
sCol = 'red';   //seconds colour.
mCol = 'red';   //minutes colour.
hCol = 'red';   //hours colour.
changeColor();
//---add zakk3456
}
//
//
function color3(){
document.bgColor = "#ff99ff";
document.fgColor = "green";

//+++add zakk3456
dCol = 'black';   //date colour.
fCol = 'black';   //face colour.
sCol = 'black';   //seconds colour.
mCol = 'black';   //minutes colour.
hCol = 'black';   //hours colour.
changeColor();
//---add zakk3456
}

//+++add zakk3456
function changeColor() {
    for (i = 0; i < D.length; i++) {
        var ctrl = document.getElementById('_date' + i.toString());
        if (ctrl) {
            ctrl.style.color = dCol;
        }
    }
    for (i = 0; i < F; i++) {
        var ctrl = document.getElementById('_face' + i.toString());
        if (ctrl) {
            ctrl.style.color = fCol;
        }
    }
    for (i = 0; i < H.length; i++) {
        var ctrl = document.getElementById('_hours' + i.toString());
        if (ctrl) {
            ctrl.style.color = hCol;
        }
    }
    for (i = 0; i < M.length; i++) {
        var ctrl = document.getElementById('_minutes' + i.toString());
        if (ctrl) {
            ctrl.style.color = mCol;
        }
    }
    for (i = 0; i < S.length; i++) {
        var ctrl = document.getElementById('_seconds' + i.toString());
        if (ctrl) {
            ctrl.style.color = sCol;
        }
    }
}
//---add zakk3456
//
// -->
</script>
</HEAD>

<BODY>

<p><FONT size="5"><B>魔法の時計</B></FONT></p>
<br><br><br><br><br><br><br><br>

<script language="JavaScript"> 
<!-- 
//
if (document.getElementById&&!document.layers){
// *** Clock colours
dCol='blue';   //date colour.
fCol='pink';   //face colour.
sCol='yellow';   //seconds colour.
mCol='red';   //minutes colour.
hCol='red';   //hours colour.

// *** Controls
del=0.6;  //Follow mouse speed.
ref=40;   //Run speed (timeout).
//  
var ieType=(typeof window.innerWidth != 'number');
var docComp=(document.compatMode);
var docMod=(docComp && docComp.indexOf("CSS") != -1);
var ieRef=(ieType && docMod)
?document.documentElement:document.body;
theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900; 
tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year;
D=tmpdate.split("");
N='3 4 5 6 7 8 9 10 11 12 1 2';
N=N.split(" ");
F=N.length;
H='☆☆☆☆';
H=H.split("");
M='☆☆☆☆☆';
M=M.split("");
S='-----';
S=S.split("");
siz=65;
eqf=360/F;
eqd=360/D.length;
han=siz/5.5;
ofy=-7;
ofx=-3;
ofst=70;
tmr=null;
vis=true;
mouseY=0;
mouseX=0;
dy=new Array();
dx=new Array();
zy=new Array();
zx=new Array();
tmps=new Array();
tmpm=new Array(); 
tmph=new Array();
tmpf=new Array(); 
tmpd=new Array();
var sum=parseInt(D.length+F+H.length+M.length+S.length)+1;
for (i=0; i < sum; i++){
dy[i]=0;
dx[i]=0;
zy[i]=0;
zx[i]=0;
}

algn=new Array();
for (i=0; i < D.length; i++){
algn[i]=(parseInt(D[i]) || D[i]==0)?10:9;
document.write('<div id="_date'+i+'" class="css2" style="color:'+dCol+'">'+D[i]+'<\/div>');
tmpd[i]=document.getElementById("_date"+i).style;
}
for (i=0; i < F; i++){
document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'<\/div>');
tmpf[i]=document.getElementById("_face"+i).style; 
}
for (i=0; i < H.length; i++){
document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'<\/div>');
tmph[i]=document.getElementById("_hours"+i).style;
}
for (i=0; i < M.length; i++){
document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'<\/div>');
tmpm[i]=document.getElementById("_minutes"+i).style; 
}
for (i=0; i < S.length; i++){
document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'<\/div>');
tmps[i]=document.getElementById("_seconds"+i).style;         
}


function onoff(){
if (vis){ 
 vis=false;
 document.getElementById("control").value="Clock On";
 }
else{ 
 vis=true;
 document.getElementById("control").value="Clock Off";
 Delay();
 }
kill();
}

function kill(){
if (vis) 
 document.onmousemove=mouse;
else 
 document.onmousemove=null;
} 

function mouse(e){
var msy = (!ieType)?window.pageYOffset:0;
if (!e) e = window.event;    
 if (typeof e.pageY == 'number'){
  mouseY = e.pageY + ofst - msy;
  mouseX = e.pageX + ofst;
 }
 else{
  mouseY = e.clientY + ofst - msy;
  mouseX = e.clientX + ofst;
 }
if (!vis) kill();
}
document.onmousemove=mouse;

function winDims(){
winH=(ieType)?ieRef.clientHeight:window.innerHeight; 
winW=(ieType)?ieRef.clientWidth:window.innerWidth;
}
winDims();
window.onresize=new Function("winDims()");

function ClockAndAssign(){
time = new Date();
secs = time.getSeconds();
sec = Math.PI * (secs-15) / 30;
mins = time.getMinutes();
min = Math.PI * (mins-15) / 30;
hrs = time.getHours();
hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;

for (i=0; i < S.length; i++){
 tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";
 tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px";
 }
for (i=0; i < M.length; i++){
 tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";
 tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";
 }
for (i=0; i < H.length; i++){
 tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";
 tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";
 }
for (i=0; i < F; i++){
 tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";
 tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";
 }
for (i=0; i < D.length; i++){
 tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";
 tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";
 }
if (!vis) clearTimeout(tmr);
}

buffW=(ieType)?80:90;
function Delay(){
scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset;
if (!vis){
 dy[0]=-100;
 dx[0]=-100;
}
else{
 zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del);
 zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del);
}
for (i=1; i < sum; i++){
 if (!vis){
  dy[i]=-100;
  dx[i]=-100;
 }
 else{
  zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
  zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);
 }
if (dy[i-1] >= winH-80) dy[i-1]=winH-80;
if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;
}

tmr=setTimeout('Delay()',ref);
ClockAndAssign();
}
window.onload=Delay;
}
//-->
</script> 

<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()" 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: darkgreen"
onClick="color2()" 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: #ff99ff"
onClick="color3()" type="button" value="
 "> 
</p></center>
<br><br><br>

<center><p>
<script type="text/javascript"> 
<!-- Mouse Clock Button
//Hide from older browsers 
if (document.getElementById&&!document.layers){
document.write('<input class=butt type="button" id="control" value="Clock Off" onClick="this.blur();onoff()"></span>');
}
//-->
</script>
</p></center>
</BODY>
</HTML>
1
  • 回答をありがとうございました。 うまく時計と背景色ボタンがリンクされていました。 これで、スッキリしました! 似たようなことを試していたのですが、知識不足でいまいち踏み込みが 足りませんでした(笑) やり方は、幾通りかあるようですね。 ちなみに、最後の段落(clock off[on])で、なぜか余分な</span>が 混ざっていました。
    – user9359
    Commented 2015年4月17日 14:35

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

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