QA@IT
«質問へ戻る

タイトルが的を外れていました。

26
タイトル
if節にすると、animationスタイルが反映されない。
コード内の時刻を更新させる箇所内で、"className"が設定できない。
本文
 "日本語表記のカレンダー"に切り替わるように設定し、"日本語表記のカレンダー"の干支(酉)にanimation
 スタイルを設定しようと試みたのですが、反映されません。どうすれば、このコードでanimation
 スタイルを設定できるでしょうか。
-なお、ただの色や,if節がない場合のanimationスタイルは、設定できます。
+なお、時刻を更新させない場合の"className"は、設定できます。
 
-関連箇所は、スクリプトのfunction ClockAndAssign() {}内の// Date wrapperの下にある"if(vis){~}
-else{~}"の中です。
+関連箇所(時刻を更新させる箇所)は、スクリプトのfunction ClockAndAssign() {}内の// Date wrapperの下にある
+"if(vis){~}else{~}"の中です。
 
 コード全体
 

コード内の時刻を更新させる箇所内で、"className"が設定できない。

下記のコードは、ウインドウ上をクリックするたびにアナログ時計の外周を"英語表記のカレンダー"と
"日本語表記のカレンダー"に切り替わるように設定し、"日本語表記のカレンダー"の干支(酉)にanimation
スタイルを設定しようと試みたのですが、反映されません。どうすれば、このコードでanimation
スタイルを設定できるでしょうか。
なお、時刻を更新させない場合の"className"は、設定できます。

関連箇所(時刻を更新させる箇所)は、スクリプトのfunction ClockAndAssign() {}内の// Date wrapperの下にある
"if(vis){~}else{~}"の中です。

コード全体

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

<style>

.eto{ 
-webkit-animation:eto 1s ease-in-out infinite alternate;   
-moz-animation:eto 1s ease-in-out infinite alternate;   
animation:eto 1s ease-in-out infinite alternate;
} 
@-webkit-keyframes eto{ 
0%,49.9% {opacity:0;}
50%,100% {opacity:1; color:deeppink;} 
} 
@-moz-keyframes eto{ 
0%,49.9% {opacity:0;}
50%,100% {opacity:1; color:deeppink;} 
} 
@keyframes eto{
0%,49.9% {opacity:0;}
50%,100% {opacity:1; color:deeppink;} 
}

</style>

</head>

<body>

<div id="clock">
    <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 = '00ff00', //date colour.
    sCol = 'ff0000', //seconds colour.
    mCol = '000000', //minutes colour.
    hCol = '000000', //hours colour.
    fCol = '0000ff', //face color
    ClockHeight = 40,
    ClockWidth = 40,
    ClockFromMouseY = 0,
    ClockFromMouseX = 100;

var w = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    m = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    d = ["①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛"],
    date = new Date(),
    week = w[date.getDay()],
    month = m[date.getMonth()],
    day = d[date.getDate()-1],
    year = date.getYear() + 1900;

if((day == d[1-1])||(day == d[21-1])||(day == d[31-1])){
day=day+ "st";
}
else if((day == d[2-1])||(day == d[22-1])){
day=day+ "nd";
}
else if((day == d[3-1])||(day == d[23-1])){
day=day+ "rd";
}
else{
day=day+ "th";
}

var    TodaysDate = "★" + " " + week + " "+  day + " " + month + " " + 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.03,
    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 = '';


// 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() 
{

if (vis){

step=0.03;
var w = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    m = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    d = ["①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛"],
    date = new Date(),
    week = w[date.getDay()],
    month = m[date.getMonth()],
    day = d[date.getDate()-1],
    year = date.getYear() + 1900;

if((day == d[1-1])||(day == d[21-1])||(day == d[31-1])){
day=day+ "st";
}
else if((day == d[2-1])||(day == d[22-1])){
day=day+ "nd";
}
else if((day == d[3-1])||(day == d[23-1])){
day=day+ "rd";
}
else{
day=day+ "th";
}
var    TodaysDate = "★" + " " + week + " "+  day + " " + month + " " + year+ " " + "★" ;
}
else{

step=0.15;
var date = new Date(),
       m = new Array("①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫"),
       d = new Array("①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛"),
       w = new Array("㊐", "㊊", "㊋", "㊌", "㊍", "㊎", "㊏"),
       Wareki=date.getYear() + 1900,
       month = m[date.getMonth()], 
       day = d[date.getDate()-1],
       week = w[date.getDay()];

var option = { year:'2-digit'};

var Eto = new Array("申", "酉", "戌", "亥", "子", "丑", "寅", "卯", "辰", "巳", "午", "未"),
    EtoNum = Wareki % 12;

var TodaysDate = "★" + " " + date.toLocaleDateString("ja-JP-u-ca-japanese", option).replace(/\u200e/g, "").replace(" ", "") + "◆" + Eto[EtoNum] + "◆" + " " + month + "月" + day +"日" + " " + week + " " + "★";
}

var D = TodaysDate.split('');
var Dsplit = 360 / D.length;
var props2 = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">';

// 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;

if(vis){

var divChildren = $('Od').children[0].children;
    for (i = 0; i < divChildren.length; i++) {
        var divEl = divChildren[i];

        if ((i > 0) && (i < 5)) {
           if (week == w[4]) {
            divEl.children[0].style.color = "red";
                             }
           else if (week == w[6]) {
              divEl.children[0].style.color = "lightblue";
                             }
           else {
              divEl.children[0].style.color = dCol;
                             }
                 }
         }
}

else{

    var divChildren = $('Od').children[0].children;
    for (i = 0; i < divChildren.length; i++) {
        var divEl = divChildren[i];

        if (i == 8) {
            divEl.children[0].classname = "eto";
                     }

        else if (i == 16) {
               if (week == w[4]) {
                   divEl.children[0].style.color = "red";
                                  }
               else if (week == w[6]) {
                   divEl.children[0].style.color = "lightblue";
                                  }
               else {
                   divEl.children[0].style.color = dCol;
                                  }
                      }
           }
}

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

var vis=true;//スイッチ

function changeLang(){

  vis=!vis;

     if (vis){

        vis=true;

             }

     else   {

        vis=false;

             }
  }
window.onclick=changeLang;
Delay();

}());

</script>
</body>
</html>

下記のコードは、ウインドウ上をクリックするたびにアナログ時計の外周を"英語表記のカレンダー"と
"日本語表記のカレンダー"に切り替わるように設定し、"日本語表記のカレンダー"の干支(酉)にanimation
スタイルを設定しようと試みたのですが、反映されません。どうすれば、このコードでanimation
スタイルを設定できるでしょうか。
なお、時刻を更新させない場合の"className"は、設定できます。

関連箇所(時刻を更新させる箇所)は、スクリプトのfunction ClockAndAssign() {}内の// Date wrapperの下にある
"if(vis){~}else{~}"の中です。

コード全体

```ここに言語を入力
<html>

<head>

    <meta charset="utf-8" />

    <title></title>

<style>

.eto{ 
-webkit-animation:eto 1s ease-in-out infinite alternate;   
-moz-animation:eto 1s ease-in-out infinite alternate;   
animation:eto 1s ease-in-out infinite alternate;
} 
@-webkit-keyframes eto{ 
0%,49.9% {opacity:0;}
50%,100% {opacity:1; color:deeppink;} 
} 
@-moz-keyframes eto{ 
0%,49.9% {opacity:0;}
50%,100% {opacity:1; color:deeppink;} 
} 
@keyframes eto{
0%,49.9% {opacity:0;}
50%,100% {opacity:1; color:deeppink;} 
}

</style>

</head>

<body>

<div id="clock">
    <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 = '00ff00', //date colour.
    sCol = 'ff0000', //seconds colour.
    mCol = '000000', //minutes colour.
    hCol = '000000', //hours colour.
    fCol = '0000ff', //face color
    ClockHeight = 40,
    ClockWidth = 40,
    ClockFromMouseY = 0,
    ClockFromMouseX = 100;

var w = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    m = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    d = ["①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛"],
    date = new Date(),
    week = w[date.getDay()],
    month = m[date.getMonth()],
    day = d[date.getDate()-1],
    year = date.getYear() + 1900;

if((day == d[1-1])||(day == d[21-1])||(day == d[31-1])){
day=day+ "st";
}
else if((day == d[2-1])||(day == d[22-1])){
day=day+ "nd";
}
else if((day == d[3-1])||(day == d[23-1])){
day=day+ "rd";
}
else{
day=day+ "th";
}

var    TodaysDate = "★" + " " + week + " "+  day + " " + month + " " + 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.03,
    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 = '';


// 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() 
{

if (vis){

step=0.03;
var w = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    m = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    d = ["①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛"],
    date = new Date(),
    week = w[date.getDay()],
    month = m[date.getMonth()],
    day = d[date.getDate()-1],
    year = date.getYear() + 1900;

if((day == d[1-1])||(day == d[21-1])||(day == d[31-1])){
day=day+ "st";
}
else if((day == d[2-1])||(day == d[22-1])){
day=day+ "nd";
}
else if((day == d[3-1])||(day == d[23-1])){
day=day+ "rd";
}
else{
day=day+ "th";
}
var    TodaysDate = "★" + " " + week + " "+  day + " " + month + " " + year+ " " + "★" ;
}
else{

step=0.15;
var date = new Date(),
       m = new Array("①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫"),
       d = new Array("①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛"),
       w = new Array("㊐", "㊊", "㊋", "㊌", "㊍", "㊎", "㊏"),
       Wareki=date.getYear() + 1900,
       month = m[date.getMonth()], 
       day = d[date.getDate()-1],
       week = w[date.getDay()];

var option = { year:'2-digit'};

var Eto = new Array("申", "酉", "戌", "亥", "子", "丑", "寅", "卯", "辰", "巳", "午", "未"),
    EtoNum = Wareki % 12;

var TodaysDate = "★" + " " + date.toLocaleDateString("ja-JP-u-ca-japanese", option).replace(/\u200e/g, "").replace(" ", "") + "◆" + Eto[EtoNum] + "◆" + " " + month + "月" + day +"日" + " " + week + " " + "★";
}

var D = TodaysDate.split('');
var Dsplit = 360 / D.length;
var props2 = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">';

// 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;

if(vis){

var divChildren = $('Od').children[0].children;
    for (i = 0; i < divChildren.length; i++) {
        var divEl = divChildren[i];

        if ((i > 0) && (i < 5)) {
           if (week == w[4]) {
            divEl.children[0].style.color = "red";
                             }
           else if (week == w[6]) {
              divEl.children[0].style.color = "lightblue";
                             }
           else {
              divEl.children[0].style.color = dCol;
                             }
                 }
         }
}

else{

    var divChildren = $('Od').children[0].children;
    for (i = 0; i < divChildren.length; i++) {
        var divEl = divChildren[i];

        if (i == 8) {
            divEl.children[0].classname = "eto";
                     }

        else if (i == 16) {
               if (week == w[4]) {
                   divEl.children[0].style.color = "red";
                                  }
               else if (week == w[6]) {
                   divEl.children[0].style.color = "lightblue";
                                  }
               else {
                   divEl.children[0].style.color = dCol;
                                  }
                      }
           }
}

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

var vis=true;//スイッチ

function changeLang(){

  vis=!vis;

     if (vis){

        vis=true;

             }

     else   {

        vis=false;
      
             }
  }
window.onclick=changeLang;
Delay();

}());

</script>
</body>
</html>

```

質問を投稿

if節にすると、animationスタイルが反映されない。

下記のコードは、ウインドウ上をクリックするたびにアナログ時計の外周を"英語表記のカレンダー"と
"日本語表記のカレンダー"に切り替わるように設定し、"日本語表記のカレンダー"の干支(酉)にanimation
スタイルを設定しようと試みたのですが、反映されません。どうすれば、このコードでanimation
スタイルを設定できるでしょうか。
なお、ただの色や,if節がない場合のanimationスタイルは、設定できます。

関連箇所は、スクリプトのfunction ClockAndAssign() {}内の// Date wrapperの下にある"if(vis){~}
else{~}"の中です。

コード全体

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

<style>

.eto{ 
-webkit-animation:eto 1s ease-in-out infinite alternate;   
-moz-animation:eto 1s ease-in-out infinite alternate;   
animation:eto 1s ease-in-out infinite alternate;
} 
@-webkit-keyframes eto{ 
0%,49.9% {opacity:0;}
50%,100% {opacity:1; color:deeppink;} 
} 
@-moz-keyframes eto{ 
0%,49.9% {opacity:0;}
50%,100% {opacity:1; color:deeppink;} 
} 
@keyframes eto{
0%,49.9% {opacity:0;}
50%,100% {opacity:1; color:deeppink;} 
}

</style>

</head>

<body>

<div id="clock">
    <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 = '00ff00', //date colour.
    sCol = 'ff0000', //seconds colour.
    mCol = '000000', //minutes colour.
    hCol = '000000', //hours colour.
    fCol = '0000ff', //face color
    ClockHeight = 40,
    ClockWidth = 40,
    ClockFromMouseY = 0,
    ClockFromMouseX = 100;

var w = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    m = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    d = ["①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛"],
    date = new Date(),
    week = w[date.getDay()],
    month = m[date.getMonth()],
    day = d[date.getDate()-1],
    year = date.getYear() + 1900;

if((day == d[1-1])||(day == d[21-1])||(day == d[31-1])){
day=day+ "st";
}
else if((day == d[2-1])||(day == d[22-1])){
day=day+ "nd";
}
else if((day == d[3-1])||(day == d[23-1])){
day=day+ "rd";
}
else{
day=day+ "th";
}

var    TodaysDate = "★" + " " + week + " "+  day + " " + month + " " + 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.03,
    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 = '';


// 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() 
{

if (vis){

step=0.03;
var w = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    m = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    d = ["①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛"],
    date = new Date(),
    week = w[date.getDay()],
    month = m[date.getMonth()],
    day = d[date.getDate()-1],
    year = date.getYear() + 1900;

if((day == d[1-1])||(day == d[21-1])||(day == d[31-1])){
day=day+ "st";
}
else if((day == d[2-1])||(day == d[22-1])){
day=day+ "nd";
}
else if((day == d[3-1])||(day == d[23-1])){
day=day+ "rd";
}
else{
day=day+ "th";
}
var    TodaysDate = "★" + " " + week + " "+  day + " " + month + " " + year+ " " + "★" ;
}
else{

step=0.15;
var date = new Date(),
       m = new Array("①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫"),
       d = new Array("①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛"),
       w = new Array("㊐", "㊊", "㊋", "㊌", "㊍", "㊎", "㊏"),
       Wareki=date.getYear() + 1900,
       month = m[date.getMonth()], 
       day = d[date.getDate()-1],
       week = w[date.getDay()];

var option = { year:'2-digit'};

var Eto = new Array("申", "酉", "戌", "亥", "子", "丑", "寅", "卯", "辰", "巳", "午", "未"),
    EtoNum = Wareki % 12;

var TodaysDate = "★" + " " + date.toLocaleDateString("ja-JP-u-ca-japanese", option).replace(/\u200e/g, "").replace(" ", "") + "◆" + Eto[EtoNum] + "◆" + " " + month + "月" + day +"日" + " " + week + " " + "★";
}

var D = TodaysDate.split('');
var Dsplit = 360 / D.length;
var props2 = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">';

// 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;

if(vis){

var divChildren = $('Od').children[0].children;
    for (i = 0; i < divChildren.length; i++) {
        var divEl = divChildren[i];

        if ((i > 0) && (i < 5)) {
           if (week == w[4]) {
            divEl.children[0].style.color = "red";
                             }
           else if (week == w[6]) {
              divEl.children[0].style.color = "lightblue";
                             }
           else {
              divEl.children[0].style.color = dCol;
                             }
                 }
         }
}

else{

    var divChildren = $('Od').children[0].children;
    for (i = 0; i < divChildren.length; i++) {
        var divEl = divChildren[i];

        if (i == 8) {
            divEl.children[0].classname = "eto";
                     }

        else if (i == 16) {
               if (week == w[4]) {
                   divEl.children[0].style.color = "red";
                                  }
               else if (week == w[6]) {
                   divEl.children[0].style.color = "lightblue";
                                  }
               else {
                   divEl.children[0].style.color = dCol;
                                  }
                      }
           }
}

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

var vis=true;//スイッチ

function changeLang(){

  vis=!vis;

     if (vis){

        vis=true;

             }

     else   {

        vis=false;

             }
  }
window.onclick=changeLang;
Delay();

}());

</script>
</body>
</html>

下記のコードは、ウインドウ上をクリックするたびにアナログ時計の外周を"英語表記のカレンダー"と
"日本語表記のカレンダー"に切り替わるように設定し、"日本語表記のカレンダー"の干支(酉)にanimation
スタイルを設定しようと試みたのですが、反映されません。どうすれば、このコードでanimation
スタイルを設定できるでしょうか。
なお、ただの色や,if節がない場合のanimationスタイルは、設定できます。

関連箇所は、スクリプトのfunction ClockAndAssign() {}内の// Date wrapperの下にある"if(vis){~}
else{~}"の中です。

コード全体

```ここに言語を入力
<html>

<head>

    <meta charset="utf-8" />

    <title></title>

<style>

.eto{ 
-webkit-animation:eto 1s ease-in-out infinite alternate;   
-moz-animation:eto 1s ease-in-out infinite alternate;   
animation:eto 1s ease-in-out infinite alternate;
} 
@-webkit-keyframes eto{ 
0%,49.9% {opacity:0;}
50%,100% {opacity:1; color:deeppink;} 
} 
@-moz-keyframes eto{ 
0%,49.9% {opacity:0;}
50%,100% {opacity:1; color:deeppink;} 
} 
@keyframes eto{
0%,49.9% {opacity:0;}
50%,100% {opacity:1; color:deeppink;} 
}

</style>

</head>

<body>

<div id="clock">
    <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 = '00ff00', //date colour.
    sCol = 'ff0000', //seconds colour.
    mCol = '000000', //minutes colour.
    hCol = '000000', //hours colour.
    fCol = '0000ff', //face color
    ClockHeight = 40,
    ClockWidth = 40,
    ClockFromMouseY = 0,
    ClockFromMouseX = 100;

var w = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    m = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    d = ["①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛"],
    date = new Date(),
    week = w[date.getDay()],
    month = m[date.getMonth()],
    day = d[date.getDate()-1],
    year = date.getYear() + 1900;

if((day == d[1-1])||(day == d[21-1])||(day == d[31-1])){
day=day+ "st";
}
else if((day == d[2-1])||(day == d[22-1])){
day=day+ "nd";
}
else if((day == d[3-1])||(day == d[23-1])){
day=day+ "rd";
}
else{
day=day+ "th";
}

var    TodaysDate = "★" + " " + week + " "+  day + " " + month + " " + 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.03,
    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 = '';


// 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() 
{

if (vis){

step=0.03;
var w = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    m = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    d = ["①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛"],
    date = new Date(),
    week = w[date.getDay()],
    month = m[date.getMonth()],
    day = d[date.getDate()-1],
    year = date.getYear() + 1900;

if((day == d[1-1])||(day == d[21-1])||(day == d[31-1])){
day=day+ "st";
}
else if((day == d[2-1])||(day == d[22-1])){
day=day+ "nd";
}
else if((day == d[3-1])||(day == d[23-1])){
day=day+ "rd";
}
else{
day=day+ "th";
}
var    TodaysDate = "★" + " " + week + " "+  day + " " + month + " " + year+ " " + "★" ;
}
else{

step=0.15;
var date = new Date(),
       m = new Array("①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫"),
       d = new Array("①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛"),
       w = new Array("㊐", "㊊", "㊋", "㊌", "㊍", "㊎", "㊏"),
       Wareki=date.getYear() + 1900,
       month = m[date.getMonth()], 
       day = d[date.getDate()-1],
       week = w[date.getDay()];

var option = { year:'2-digit'};

var Eto = new Array("申", "酉", "戌", "亥", "子", "丑", "寅", "卯", "辰", "巳", "午", "未"),
    EtoNum = Wareki % 12;

var TodaysDate = "★" + " " + date.toLocaleDateString("ja-JP-u-ca-japanese", option).replace(/\u200e/g, "").replace(" ", "") + "◆" + Eto[EtoNum] + "◆" + " " + month + "月" + day +"日" + " " + week + " " + "★";
}

var D = TodaysDate.split('');
var Dsplit = 360 / D.length;
var props2 = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">';

// 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;

if(vis){

var divChildren = $('Od').children[0].children;
    for (i = 0; i < divChildren.length; i++) {
        var divEl = divChildren[i];

        if ((i > 0) && (i < 5)) {
           if (week == w[4]) {
            divEl.children[0].style.color = "red";
                             }
           else if (week == w[6]) {
              divEl.children[0].style.color = "lightblue";
                             }
           else {
              divEl.children[0].style.color = dCol;
                             }
                 }
         }
}

else{

    var divChildren = $('Od').children[0].children;
    for (i = 0; i < divChildren.length; i++) {
        var divEl = divChildren[i];

        if (i == 8) {
            divEl.children[0].classname = "eto";
                     }

        else if (i == 16) {
               if (week == w[4]) {
                   divEl.children[0].style.color = "red";
                                  }
               else if (week == w[6]) {
                   divEl.children[0].style.color = "lightblue";
                                  }
               else {
                   divEl.children[0].style.color = dCol;
                                  }
                      }
           }
}

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

var vis=true;//スイッチ

function changeLang(){

  vis=!vis;

     if (vis){

        vis=true;

             }

     else   {

        vis=false;
      
             }
  }
window.onclick=changeLang;
Delay();

}());

</script>
</body>
</html>

```