

最近、追従する文字列をクリックするたびに"切り離し⇔追従"とする面白いコードをいただき、  
これをヒントに別コードで"ボタン"をクリックするたびに"切り離し⇔追従"とするコードを作りました。  
これを、"ボタン"ではなくて、いただいたコードのようにただ"クリック"するだけで"切り離し⇔追従"とするコードに作り変えられないでしょうか。可能でしたら、教えていただけないでしょうか。  
関連箇所は、スクリプトの"function onoff(){}"あたりです。

[code]

        <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </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>
    
        <input type="button" value="時計Off" id="control">
    
        <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,
            d = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
            m = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],    
            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();
        var tim=setTimeout(Delay, 20);
        if (!vis){clearTimeout(tim)}
        }
    
        var vis=true;
        function onoff(){
        vis=!vis;
        document.getElementById("control").value=vis?"時計Off":"時計On";
        if (vis){Delay();}
        }
        document.getElementById("control").onclick=onoff;
    
        Delay();
    
        }());
        </script>
        </body>
        </html>
    
[/code]


CC BY-SA 3.0
2017-04-23T06:14:47.093
34224
2020-09-24T05:05:20.520
20431
question
javascript
追従する文字列を、"ボタン"ではなくてただクリックするだけで"切り離し⇔追従"とする方法


"ボタン”をクリックするのでなく、"ウィンドウ"上をクリックすると考えて、  
function onoff(){}内を以下のように書けば、希望通りになりました。  
まず、 _input_ タグを消し、以下のように書き換えるだけでいいです。

[code]

    var vis=true;//スイッチ
    function onoff(){
    vis=!vis;
    if (vis){Delay();}
    }
    window.onclick=onoff;
    
    Delay();
    
[/code]

また、時計を"フリーズ"させないで、動いたまま切り離したいときは、以下のように書くといいです。

[code]

    function Delay() 
    {中略 
            ClockAndAssign();
        setTimeout(Delay, 20);
    }
    
    var vis=true;//スイッチ
    function onoff(){
    vis=!vis;
    document.onmousemove=vis? Mouse:null;
    }
    window.onclick=onoff;
    Delay();
    
[/code]


CC BY-SA 3.0
2017-04-25T08:41:18.230
34269
2017-04-25T08:41:18.230
20431
34224
answer