アナログ時計を消したら、好みに設定した色を初期の色に戻す方法
質問の要点を分かりやすくするために、ソースコードを簡略化しました。
サイト関係者に迷惑をかけまして、申し訳ありませんでした。
質問ですが、画面を見ていただけると分かりますが、selectのそれぞれのカラーボタン(Ｄ･Ｆ･Ｈ･Ｍ･Ｓ)を同一色に押した場合、時計全体の色を付けるＣボタンそのものの色も同じになるように設定したいのです。１つでも違う色が設定されれば、Ｃボタンは白になるように設定しています。
もう1つの質問は、一度時計を消したら、好みに設定した時計の色をその背景色のときの初期の状態に戻すようにしたいのです。
ソースコードでは、背景色がsilverのときの初期の時計の色は"mediumblue"，背景色がmediumblueのときの初期の時計の色は"black"，背景色が"black"のときの初期の時計の色は"silver"と設定しています。
2つの質問とも"ifの条件式"で組み立てる必要があると思いますが、うまくいかなくて頭が混乱しています。ご教示お願いします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
<!--
.butt {
BACKGROUND:maroon;
COLOR:gold;
}
#clock {
color:silver;
}
#clockCOLOR {
background:lightpink;
background-color:silver;
color:black;
}
#color1 {
background:lightpink;
background-color:silver;
color:black;
}
#color2 {
background:lightpink;
background-color:silver;
color:black;
}
#color3 {
background:lightpink;
background-color:silver;
color:black;
}
#color4 {
background:lightpink;
background-color:silver;
color:black;
}
#color5 {
background:lightpink;
background-color:silver;
color:black;
}
//-->
</style>
<script type="text/javascript">
<!--
function bg1() {
document.bgColor = "silver";
document.getElementById('Od').style.color='mediumblue';
document.getElementById('Of').style.color='mediumblue';
document.getElementById('Oh').style.color='mediumblue';
document.getElementById('Om').style.color='mediumblue';
document.getElementById('Os').style.color='mediumblue';
document.getElementById("clockCOLOR").style.background="mediumblue";
document.getElementById("color1").style.background="mediumblue";
document.getElementById("color2").style.background="mediumblue";
document.getElementById("color3").style.background="mediumblue";
document.getElementById("color4").style.background="mediumblue";
document.getElementById("color5").style.background="mediumblue";
}
function bg2() {
document.bgColor = "mediumblue";
document.getElementById('Od').style.color='black';
document.getElementById('Of').style.color='black';
document.getElementById('Oh').style.color='black';
document.getElementById('Om').style.color='black';
document.getElementById('Os').style.color='black';
document.getElementById("clockCOLOR").style.background="black";
document.getElementById("color1").style.background="black";
document.getElementById("color2").style.background="black";
document.getElementById("color3").style.background="black";
document.getElementById("color4").style.background="black";
document.getElementById("color5").style.background="black";
}
function bg3() {
document.bgColor = "black";
document.getElementById('Od').style.color='silver';
document.getElementById('Of').style.color='silver';
document.getElementById('Oh').style.color='silver';
document.getElementById('Om').style.color='silver';
document.getElementById('Os').style.color='silver';
document.getElementById("clockCOLOR").style.background="silver";
document.getElementById("color1").style.background="silver";
document.getElementById("color2").style.background="silver";
document.getElementById("color3").style.background="silver";
document.getElementById("color4").style.background="silver";
document.getElementById("color5").style.background="silver";
}
//-->
</script>
<script type="text/javascript">
<!--
function clockCOLOR1() {
document.getElementById("Od").style.color="silver";
document.getElementById("Of").style.color="silver";
document.getElementById("Oh").style.color="silver";
document.getElementById("Om").style.color="silver";
document.getElementById("Os").style.color="silver";
document.getElementById("clockCOLOR").style.background="silver";
document.getElementById("color1").style.background="silver";
document.getElementById("color2").style.background="silver";
document.getElementById("color3").style.background="silver";
document.getElementById("color4").style.background="silver";
document.getElementById("color5").style.background="silver";
}
function clockCOLOR2() {
document.getElementById("Od").style.color="mediumblue";
document.getElementById("Of").style.color="mediumblue";
document.getElementById("Oh").style.color="mediumblue";
document.getElementById("Om").style.color="mediumblue";
document.getElementById("Os").style.color="mediumblue";
document.getElementById("clockCOLOR").style.background="mediumblue";
document.getElementById("color1").style.background="mediumblue";
document.getElementById("color2").style.background="mediumblue";
document.getElementById("color3").style.background="mediumblue";
document.getElementById("color4").style.background="mediumblue";
document.getElementById("color5").style.background="mediumblue";
}
function clockCOLOR3() {
document.getElementById("Od").style.color="black";
document.getElementById("Of").style.color="black";
document.getElementById("Oh").style.color="black";
document.getElementById("Om").style.color="black";
document.getElementById("Os").style.color="black";
document.getElementById("clockCOLOR").style.background="black";
document.getElementById("color1").style.background="black";
document.getElementById("color2").style.background="black";
document.getElementById("color3").style.background="black";
document.getElementById("color4").style.background="black";
document.getElementById("color5").style.background="black";
}
function Col11() {
document.getElementById("Od").style.color="silver";
document.getElementById("color1").style.background="silver";
document.getElementById("clockCOLOR").style.background="white";
}
function Col12() {
document.getElementById("Od").style.color="mediumblue";
document.getElementById("color1").style.background="mediumblue";
document.getElementById("clockCOLOR").style.background="white";
}
function Col13() {
document.getElementById("Od").style.color="black";
document.getElementById("color1").style.background="black";
document.getElementById("clockCOLOR").style.background="white";
}
function Col21() {
document.getElementById("Of").style.color="silver";
document.getElementById("color2").style.background="silver";
document.getElementById("clockCOLOR").style.background="white";
}
function Col22() {
document.getElementById("Of").style.color="mediumblue";
document.getElementById("color2").style.background="mediumblue";
document.getElementById("clockCOLOR").style.background="white";
}
function Col23() {
document.getElementById("Of").style.color="black";
document.getElementById("color2").style.background="black";
document.getElementById("clockCOLOR").style.background="white";
}
function Col31() {
document.getElementById("Oh").style.color="silver";
document.getElementById("color3").style.background="silver";
document.getElementById("clockCOLOR").style.background="white";
}
function Col32() {
document.getElementById("Oh").style.color="mediumblue";
document.getElementById("color3").style.background="mediumblue";
document.getElementById("clockCOLOR").style.background="white";
}
function Col33() {
document.getElementById("Oh").style.color="black";
document.getElementById("color3").style.background="black";
document.getElementById("clockCOLOR").style.background="white";
}
function Col41() {
document.getElementById("Om").style.color="silver";
document.getElementById("color4").style.background="silver";
document.getElementById("clockCOLOR").style.background="white";
}
function Col42() {
document.getElementById("Om").style.color="mediumblue";
document.getElementById("color4").style.background="mediumblue";
document.getElementById("clockCOLOR").style.background="white";
}
function Col43() {
document.getElementById("Om").style.color="black";
document.getElementById("color4").style.background="black";
document.getElementById("clockCOLOR").style.background="white";
}
function Col51() {
document.getElementById("Os").style.color="silver";
document.getElementById("color5").style.background="silver";
document.getElementById("clockCOLOR").style.background="white";
}
function Col52() {
document.getElementById("Os").style.color="mediumblue";
document.getElementById("color5").style.background="mediumblue";
document.getElementById("clockCOLOR").style.background="white";
}
function Col53() {
document.getElementById("Os").style.color="black";
document.getElementById("color5").style.background="black";
document.getElementById("clockCOLOR").style.background="white";
}
//-->
</script>
</head>
<body bgcolor="black">
<div id="clock" style="visibility:hidden">
<div id="Od" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Of" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Oh" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Om" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Os" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
</div>
<script type="text/javascript">
(function() {
"use strict";
function $(sel) {
return document.getElementById(sel);
}
function $$(sel) {
if (typeof document.getElementsByClassName === 'undefined') {
return document.getElementsByName(sel);
}
return document.getElementsByClassName(sel);
}
var dCol = '', //date colour.
sCol = '', //seconds colour.
mCol = '', //minutes colour.
hCol = '', //hours colour.
fCol = '', //face color
ClockHeight = 40,
ClockWidth = 40,
ClockFromMouseY = 0,
ClockFromMouseX = 100,
d = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
m = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
date = new Date(),
day = date.getDate(),
year = date.getYear() + 1900;
var TodaysDate = " " + d[date.getDay()] + " " + day + " " + m[date.getMonth()] + " " + year;
var D = TodaysDate.split('');
var H = '...';
H = H.split('');
var M = '....';
M = M.split('');
var S = '.....';
S = S.split('');
var Face = '1 2 3 4 5 6 7 8 9 10 11 12',
font = 'Helvetica, Arial, sans-serif',
size = 1,
speed = 0.6;
Face = Face.split(' ');
var n = Face.length;
var a = size * 10;
var ymouse = 0,
xmouse = 0,
scrll = 0,
props = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + fCol + '">',
props2 = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">';
var Split = 360 / n;
var Dsplit = 360 / D.length;
var HandHeight = ClockHeight / 4.5;
var HandWidth = ClockWidth / 4.5;
var HandY = -7,
HandX = -2.5,
step = 0.06,
currStep = 0,
y = [],
x = [],
Y = [],
X = [],
Dy = [],
Dx = [],
DY = [],
DX = [];
var i;
for (i = 0; i < n; i++) {
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
}
for (i = 0; i < D.length; i++) {
Dy[i] = 0;
Dx[i] = 0;
DY[i] = 0;
DX[i] = 0;
}
var wrapper = $('clock');
var html = ''
// Date wrapper
html = '';
for (i = 0; i < D.length; i++) {
html += '<div class="Date" name="Date" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props2 + D[i] + '</span></div>';
}
$('Od').children[0].innerHTML = html;
// Face wrapper
html = '';
for (i = 0; i < n; i++) {
html += '<div class="Face" name="Face" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props + Face[i] + '</span></div>';
}
$('Of').children[0].innerHTML = html;
// Hours wrapper
html = '';
for (i = 0; i < H.length; i++) {
html += '<div class="Hours" name="Hours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + hCol + ';text-align:center;font-weight:bold">' + H[i] + '</div>';
}
$('Oh').children[0].innerHTML = html;
// Minute wrapper
html = '';
for (i = 0; i < M.length; i++) {
html += '<div class="Minutes" name="Minutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + mCol + ';text-align:center;font-weight:bold">' + M[i] + '</div>';
}
$('Om').children[0].innerHTML = html;
// Seconds wrapper
html = '';
for (i = 0; i < S.length; i++) {
html += '<div class="Seconds" name="Seconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + sCol + ';text-align:center;font-weight:bold">' + S[i] + '</div>';
}
$('Os').children[0].innerHTML = html;
// Mouse move event handler
function Mouse(evnt) {
if (typeof evnt === 'undefined') {
ymouse = event.Y + ClockFromMouseY;
xmouse = event.X + ClockFromMouseX;
} else {
ymouse = evnt.clientY + ClockFromMouseY;
xmouse = evnt.clientX + ClockFromMouseX;
}
}
document.onmousemove = Mouse;
function ClockAndAssign() {
var time = new Date();
var secs = time.getSeconds();
var sec = -1.57 + Math.PI * secs / 30;
var mins = time.getMinutes();
var min = -1.57 + Math.PI * mins / 30;
var hr = time.getHours();
var hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes(), 10) / 360;
$('Od').style.top = window.document.body.scrollTop;
$('Of').style.top = window.document.body.scrollTop;
$('Oh').style.top = window.document.body.scrollTop;
$('Om').style.top = window.document.body.scrollTop;
$('Os').style.top = window.document.body.scrollTop;
for (i = 0; i < n; i++) {
var F = $$('Face')[i];
F.style.top = y[i] + ClockHeight * Math.sin(-1.0471 + i * Split * Math.PI / 180) + scrll;
F.style.left = x[i] + ClockWidth * Math.cos(-1.0471 + i * Split * Math.PI / 180);
}
for (i = 0; i < H.length; i++) {
var HL = $$('Hours')[i];
HL.style.top = y[i] + HandY + (i * HandHeight) * Math.sin(hrs) + scrll;
HL.style.left = x[i] + HandX + (i * HandWidth) * Math.cos(hrs);
}
for (i = 0; i < M.length; i++) {
var ML = $$('Minutes')[i].style;
ML.top = y[i] + HandY + (i * HandHeight) * Math.sin(min) + scrll;
ML.left = x[i] + HandX + (i * HandWidth) * Math.cos(min);
}
for (i = 0; i < S.length; i++) {
var SL = $$('Seconds')[i].style;
SL.top = y[i] + HandY + (i * HandHeight) * Math.sin(sec) + scrll;
SL.left = x[i] + HandX + (i * HandWidth) * Math.cos(sec);
}
for (i = 0; i < D.length; i++) {
var DL = $$('Date')[i].style;
DL.top = Dy[i] + ClockHeight * 1.5 * Math.sin(currStep + i * Dsplit * Math.PI / 180) + scrll;
DL.left = Dx[i] + ClockWidth * 1.5 * Math.cos(currStep + i * Dsplit * Math.PI / 180);
}
currStep -= step;
}
function Delay() {
scrll = 0;
Dy[0] = Math.round(DY[0] += ((ymouse) - DY[0]) * speed);
Dx[0] = Math.round(DX[0] += ((xmouse) - DX[0]) * speed);
for (i = 1; i < D.length; i++) {
Dy[i] = Math.round(DY[i] += (Dy[i - 1] - DY[i]) * speed);
Dx[i] = Math.round(DX[i] += (Dx[i - 1] - DX[i]) * speed);
}
y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);
for (i = 1; i < n; i++) {
y[i] = Math.round(Y[i] += (y[i - 1] - Y[i]) * speed);
x[i] = Math.round(X[i] += (x[i - 1] - X[i]) * speed);
}
ClockAndAssign();
setTimeout(Delay, 20);
}
Delay();
}());
num = 1;
function toggle() {
num ^= 1;
if(num == 1){
document.getElementById('clock').style.visibility="hidden";
document.getElementById('clockCOLOR').disabled=true;
document.getElementById('color1').disabled=true;
document.getElementById('color2').disabled=true;
document.getElementById('color3').disabled=true;
document.getElementById('color4').disabled=true;
document.getElementById('color5').disabled=true;
} else {
document.getElementById('clock').style.visibility="visible";
document.getElementById('clockCOLOR').disabled=false;
document.getElementById('color1').disabled=false;
document.getElementById('color2').disabled=false;
document.getElementById('color3').disabled=false;
document.getElementById('color4').disabled=false;
document.getElementById('color5').disabled=false;
}
document.getElementById("tog").value = num ?" REVIVE ":"KILL(切る)";
}
//-->
</script>
<div style="text-align:center;">
<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: silver"
onclick="bg1()" 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: mediumblue"
onclick="bg2()" 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: black"
onclick="bg3()" type="button" value=" ">
</div>
<br>
<div style="text-align:center;">
<select id="clockCOLOR" disabled>
<option style="background-color:silver;font-weight:bold" onclick="clockCOLOR1()">Ｃ</option>
<option style="background-color:mediumblue;font-weight:bold" onclick="clockCOLOR2()">Ｃ</option>
<option style="background-color:black;font-weight:bold" onclick="clockCOLOR3()">Ｃ</option>
</select>
<select id="color1" disabled>
<option style="background-color:silver;font-weight:bold" onclick="Col11()">Ｄ</option>
<option style="background-color:mediumblue;font-weight:bold" onclick="Col12()">Ｄ</option>
<option style="background-color:black;font-weight:bold" onclick="Col13()">Ｄ</option>
</select>
<select id="color2" disabled>
<option style="background-color:silver;font-weight:bold" onclick="Col21()">Ｆ</option>
<option style="background-color:mediumblue;font-weight:bold" onclick="Col22()">Ｆ</option>
<option style="background-color:black;font-weight:bold" onclick="Col23()">Ｆ</option>
</select>
<select id="color3" disabled>
<option style="background-color:silver;font-weight:bold" onclick="Col31()">Ｈ</option>
<option style="background-color:mediumblue;font-weight:bold" onclick="Col32()">Ｈ</option>
<option style="background-color:black;font-weight:bold" onclick="Col33()">Ｈ</option>
</select>
<select id="color4" disabled>
<option style="background-color:silver;font-weight:bold" onclick="Col41()">Ｍ</option>
<option style="background-color:mediumblue;font-weight:bold" onclick="Col42()">Ｍ</option>
<option style="background-color:black;font-weight:bold" onclick="Col43()">Ｍ</option>
</select>
<select id="color5" disabled>
<option style="background-color:silver;font-weight:bold" onclick="Col51()">Ｓ</option>
<option style="background-color:mediumblue;font-weight:bold" onclick="Col52()">Ｓ</option>
<option style="background-color:black;font-weight:bold" onclick="Col53()">Ｓ</option>
</select>
<input id="tog" class="butt" type="button" value="出現" onclick="toggle()">
</div>
</body>
</html>