QA@IT
«回答へ戻る

回答を投稿

こんな感じでいいのかな?
language変更ラッパーの生成頻度が高すぎて、クラスの変更が追い付いていないような感じでした。
いろいろと組み直してしまいましたが、あしからず

<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 date = new Date();
        //        var option = { year: 'numeric', month: 'short', day: 'numeric', weekday: 'long' };
        var option = { year: '2-digit', month: '2-digit', day: '2-digit', weekday: 'long' };
        var TodaysDate = " ★" + " " + date.toLocaleDateString("ja-JP-u-ca-japanese", option).replace(/\u200e/g, "") + " " + "★";

        var D = TodaysDate.split("");
        //        var X = [];
        //        for (var i = 0; i < D.length; ++i) {
        //            if (D[i] !== "") X.push(D[i]);
        //        }
        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 = '';

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

        var vis = false; //Langageスイッチ

        changeLang();

        // 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 < $$('Face').length; 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 < $$('Hours').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 < $$('Minutes').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 < $$('Seconds').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 < $$('Date').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);
        }


        function changeLang() {

            vis = !vis;

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

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

                var Eto = new Array("子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥"),
                EtoNum = (Wareki + 8) % 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">'

                if (!vis && (i == 8)) {
                    html += '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '" ' + 'class="eto">' + D[i] + '</span>';
                }
                else {
                    html += '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">' + D[i] + '</span>';
                }

                html += '</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;
                        }
                    }
                }
            }
        }

        window.onclick = changeLang;

        Delay();
    } ());
</script>
</body>
</html>
こんな感じでいいのかな?
language変更ラッパーの生成頻度が高すぎて、クラスの変更が追い付いていないような感じでした。
いろいろと組み直してしまいましたが、あしからず

```html
<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 date = new Date();
        //        var option = { year: 'numeric', month: 'short', day: 'numeric', weekday: 'long' };
        var option = { year: '2-digit', month: '2-digit', day: '2-digit', weekday: 'long' };
        var TodaysDate = " ★" + " " + date.toLocaleDateString("ja-JP-u-ca-japanese", option).replace(/\u200e/g, "") + " " + "★";

        var D = TodaysDate.split("");
        //        var X = [];
        //        for (var i = 0; i < D.length; ++i) {
        //            if (D[i] !== "") X.push(D[i]);
        //        }
        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 = '';

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

        var vis = false; //Langageスイッチ

        changeLang();

        // 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 < $$('Face').length; 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 < $$('Hours').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 < $$('Minutes').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 < $$('Seconds').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 < $$('Date').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);
        }


        function changeLang() {

            vis = !vis;

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

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

                var Eto = new Array("子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥"),
                EtoNum = (Wareki + 8) % 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">'

                if (!vis && (i == 8)) {
                    html += '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '" ' + 'class="eto">' + D[i] + '</span>';
                }
                else {
                    html += '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">' + D[i] + '</span>';
                }

                html += '</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;
                        }
                    }
                }
            }
        }

        window.onclick = changeLang;

        Delay();
    } ());
</script>
</body>
</html>
```