アナログの目覚まし時計で、設定した”目安針”に“時間針”が接触したら、アラームが鳴るようにしたい。


下記のコードは、アナログの目覚まし時計で、設定した”目安針(=時計の逆回りのライム色の針)”に“時間針(=シルバー色の短い針)”が接触したら、BGSOUND(＊IEの独自仕様です)を使ってアラームが鳴るように試みた(*質問のコードでは、アラームは鳴りません)のですが、”目安針”に“時間針”が接触していなくても『設定ボタン』を押すと、すぐにアラームが鳴ります。  
設定した”目安針”に“時間針”が接触した場合に、アラームが鳴るようにするには、どのように書けばいいでしょうか。

関連個所は `function timeCheck(){}` と `function changeFlg(){}` ，及び `function
ClockAndAssign(){}` の３カ所です。

なお、大元のコードは、下記のサイト内にあります。

<https://gist.github.com/timw4mail/2637218>

[code]

    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    
             <bgsound id="bgm" src="〇〇〇.mid" loop="-1">
    
    <style>
       body { background-color:black; }
    </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 id="Oa" style="position:absolute;top:0px;left:0px">
            <div style="position:relative">
            </div>
        </div>
    </div>
    
    <script type="text/javascript">
    
     var alarm = "解除"; //アラームフラグを初期化する。
    
     function timeCheck(){
    
    
     AL1=document.getElementById('Oa').style.top;
     AL2=document.getElementById('Oa').style.left;
     HL1=document.getElementById('Oh').style.top;
     HL2=document.getElementById('Oh').style.left;
    
            if((alarm == "設定") && ((HL1 == AL1) && (HL2 == AL2))){
                            alarm = "鳴る";
    　　　　　　　　        document.sampleForm.setAlarm.value="  Reset  ";
                            bgm.src="△△△.wav";
              }
    }
    
     function changeFlg(){
    
    
        if(alarm == "解除"){ //アラーム未設定時、
            alarm = "設定";
    　　　　　　　　document.sampleForm.setAlarm.value="  Reset  ";
                    bgm.src="";
        }else if(alarm == "設定"){ //アラーム設定済み時
    　　　　    alarm = "解除";
            document.sampleForm.setAlarm.value=" Set Alarm！";
                    bgm.src="〇〇〇.mid";
        }else{ //アラームが鳴っている時
    　　　　    alarm = "解除";
            document.sampleForm.setAlarm.value=" Set Alarm！";
                    bgm.src="〇〇〇.mid";
         }
    }
    
    　　//次の更新をセットする。
         setInterval(timeCheck,100);
                  window.onload = timeCheck;
    
    
    (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.
        fCol = '0000ff', //face color,
        sCol = 'ff0000', //seconds colour,
        mCol = 'silver', //minutes colour,
        hCol = 'silver', //hours colour,
        aCol = 'lime', //alarm color,
        ClockHeight = 40,
        ClockWidth = 40,
        ClockFromMouseY = -100,
        ClockFromMouseX = 0;
    
    
    var TodaysDate = "                            ";
    
      /*最大文字数を28文字に設定(""内に半角で28文字分スペースを作る)。
         ・最大曜日:Wednesday(９文字)
         ・最大月日:September(９文字),２桁(２文字)
         ・西暦:１千年代(４文字)
         ・スペース:４個(４文字)*/
    
    var D = TodaysDate.split('');
    var H = '...';
        H = H.split('');
    var M = '....';
        M = M.split('');
    var S = '.....';
        S = S.split('');
    var A = '.....';
        A = A.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.02, // 外周の回転速度
        currStep = 0,
            step2 = 0.02, // 目安針の回転速度
        currStep2 = 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;
    
    // Alarm wrapper
    html = '';
    for (i = 0; i < A.length; i++)
    {
        html += '<div class="Alarm" name="Alarm" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + aCol + ';text-align:center;font-weight:bold">' + A[i] + '</div>';
    } 
    $('Oa').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   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 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(alarm == "解除"){ //アラーム未設定時、
                step=0.02; step2=0.01;
        }else if(alarm == "設定"){ //アラーム設定済み時
                step=0; step2=0;
        }else{ //アラームが鳴っている時
                step=0.02; step2=0;
            }
    
        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;
        $('Oa').style.top = window.document.body.scrollTop;
    
        for (i = 0; i < n; i++)
        {
            var F = $$('Face')[i].style;
            F.top = y[i] + ClockHeight * Math.sin(-1.0471 + i * Split * Math.PI / 180) + scrll;
            F.left = x[i] + ClockWidth * Math.cos(-1.0471 + i * Split * Math.PI / 180);
        }
        for (i = 0; i < H.length; i++)
        {
            var HL = $$('Hours')[i].style;
            HL.top = y[i] + HandY + (i * HandHeight) * Math.sin(hrs) + scrll;
            HL.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 < A.length; i++)
        {
            var AL = $$('Alarm')[i].style;
            AL.top = y[i] + HandY + (i * HandHeight) * Math.sin(currStep2 ) + scrll;
            AL.left = x[i] + HandX + (i * HandWidth) * Math.cos(currStep2 );
        }
        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;
        currStep2 -= step2;
    }
    
    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();
    }());
    </script>
    
       <FORM NAME="sampleForm">
         <INPUT id="sAlarm" type="button" name="setAlarm" style="position:absolute;left:50%; top:50%;" value=" Set Alarm！" onClick="changeFlg();">
    </form>
    
    </body>
    </html>
    
[/code]




まず、なぜすぐにアラームが鳴ってしまうか確認してみましょう。

ブラウザには、開発者ツールと強力なデバッグツールがあるので、 `timeCheck` 関数の所にブレークポイントを置いてみて、  
`if((alarm == "設定") && ((HL1 == AL1) && (HL2 == AL2)))`  
の評価がどのように行われているのか確認してみます。  
[![開発者ツールの状態](https://i.stack.imgur.com/LuUns.png)](https://i.stack.imgur.com/LuUns.png)

すると、 HL1 も AL1 も HL2 も AL2 も 全部 0px であることがわかりますね。

ここで、あなたはハッと気づくはずです。  
回転している針は、 `id="Oh"` や `id="Oa"` の div 要素ではなく、 その下に動的に作られている `<div
class="Hours" ... />` や `<div class="Alarm" ... />` の要素であると。

* * *

では、回転している div 要素の座標で比較すれば良いのか？ …というと、それも **違います。**

なぜなら、 **短針と目安針が完全に重なることはまず無い** からです。

現実のアナログ時計を古典物理の世界で見た場合、 短針は連続的に動くので、どこかの一瞬のタイミングでは必ず針が重なります。

しかし、このブラウザで動くアナログ時計は、 100ms 毎に針の位置が更新され 針の動きが離散的（連続的ではない）うえに、
針の座標の計算もかなりざっくりとした近似値です。  
このため、 一見針が重なっているように見えても、実際には小数点単位でのズレがほぼ確実に発生します。

* * *

では、どうやって目安針と短針が交差した事を検出すれば良いでしょうか？

針の位置が **「前回位置をチェックしたときは目安針の前にあったけど、今回は目安針と同じか後ろにある」** ことを条件にすれば良さそうですね。

このような比較は、 1次元的な値で確認する方がやりやすいので、 2次元的な値であるXY座標による条件チェックは適切ではなさそうです。

「時間の値そのもの」 か、 「針の角度」 あたりが良さそうです。  
今回はアナログ時計らしく、後者の「針の角度」でやってみましょう。

座標の計算にサイン・コサインの三角関数を取り扱うため、角度は 0°～360° の度数法ではなく、 0～2π のラジアン法で扱います。  
また、元のコードに倣って、時計の 12時 の位置から時計回りに値が増えていくようになっています。

[code]

    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    
             <bgsound id="bgm" src="〇〇〇.mid" loop="-1">
    
    <style>
       body { background-color:black; }
    </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 id="Oa" style="position:absolute;top:0px;left:0px">
            <div style="position:relative">
            </div>
        </div>
    </div>
    
    <form NAME="sampleForm">
      <input id="sAlarm" type="button" name="setAlarm" style="position:absolute;left:50%; top:50%;" value=" Set Alarm！">
    </form>
    
    <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);
    }
    
    // Number.isNaN polyfill for IE11
    Number.isNaN = Number.isNaN || function isNaN(input) {
        return typeof input === 'number' && input !== input;
    }
    
    // ラジアン角度を、 0～2π (0°～360°) の間に正規化（ノーマライズ）する
    function normalizeRadian(rad) {
        return rad - 2 * Math.PI * Math.floor(rad / (2 * Math.PI));
    }
    
    let alarm = "解除"; //アラームフラグを初期化する。
    let normalizedLastRadian = Number.NaN;
    let normalizedAlarmRadian = Number.NaN;
    
    // 針の角度を引数に受け取り、 アラームの目安針と交差したからアラームを鳴らす関数
    function timeCheck (curRadian) {
        let normalizedCurRadian = normalizeRadian(curRadian);
    
        // 前回 (lastRadian) より 今回 (curRadian) の方が正規化した角度が小さい場合、現在の針の角度が 2π に達して 0 に戻ったということなので、
        // 目安針の位置が、 12時 (0rad) より手前に存在する場合と、 12時 (0rad) より後ろに存在する場合の 2パターン考えなければならない。
        let handIsOverflowed = normalizedCurRadian < normalizedLastRadian;
        if ( 
            (alarm == "設定")
         && (
                (normalizedLastRadian < normalizedAlarmRadian && normalizedAlarmRadian <= normalizedCurRadia)
             || (handIsOverflowed && normalizedLastRadian - 2 * Math.PI < normalizedAlarmRadian && normalizedAlarmRadian <= normalizedCurRadia)
             || (handIsOverflowed && normalizedLastRadian < normalizedAlarmRadian && normalizedAlarmRadian <= normalizedCurRadia + 2 * Math.PI)
            )
        ) {
            console.log("アラーム再生開始");
            alarm = "鳴る";
            document.sampleForm.setAlarm.value="  Reset  ";
            bgm.src="△△△.wav";
        }
        normalizedLastRadian = normalizedCurRadian;
    }
    
    // ボタンを押したときのイベントハンドラ
    function changeFlg () {
        switch (alarm) {
            case "解除":
                alarm = "設定";
                document.sampleForm.setAlarm.value="  Reset  ";
                bgm.src="";
                break;
            case "設定":
            default:
                alarm = "解除";
                normalizedAlarmRadian = Number.NaN;
                document.sampleForm.setAlarm.value=" Set Alarm！";
                bgm.src="〇〇〇.mid";
                break;
        }
    }
    $("sAlarm").addEventListener('click', changeFlg);
    
    
    var dCol = '00ff00', //date colour.
        fCol = '0000ff', //face color,
        sCol = 'ff0000', //seconds colour,
        mCol = 'silver', //minutes colour,
        hCol = 'silver', //hours colour,
        aCol = 'lime', //alarm color,
        ClockHeight = 40,
        ClockWidth = 40,
        ClockFromMouseY = -100,
        ClockFromMouseX = 0;
    
    
    var TodaysDate = "                            ";
    
      /*最大文字数を28文字に設定(""内に半角で28文字分スペースを作る)。
         ・最大曜日:Wednesday(９文字)
         ・最大月日:September(９文字),２桁(２文字)
         ・西暦:１千年代(４文字)
         ・スペース:４個(４文字)*/
    
    var D = TodaysDate.split('');
    var H = '...';
        H = H.split('');
    var M = '....';
        M = M.split('');
    var S = '.....';
        S = S.split('');
    var A = '.....';
        A = A.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.02, // 外周の回転速度
        currStep = 0,
            step2 = 0.02, // 目安針の回転速度
        currStep2 = 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;
    
    // Alarm wrapper
    html = '';
    for (i = 0; i < A.length; i++)
    {
        html += '<div class="Alarm" name="Alarm" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + aCol + ';text-align:center;font-weight:bold">' + A[i] + '</div>';
    } 
    $('Oa').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   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 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(alarm == "解除"){ //アラーム未設定時、
                step=0.02; step2=0.01;
        }else if(alarm == "設定"){ //アラーム設定済み時
                step=0; step2=0;
        }else{ //アラームが鳴っている時
                step=0.02; step2=0;
            }
    
        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;
        $('Oa').style.top = window.document.body.scrollTop;
    
        for (i = 0; i < n; i++)
        {
            var F = $$('Face')[i].style;
            F.top = y[i] + ClockHeight * Math.sin(-1.0471 + i * Split * Math.PI / 180) + scrll;
            F.left = x[i] + ClockWidth * Math.cos(-1.0471 + i * Split * Math.PI / 180);
        }
        for (i = 0; i < H.length; i++)
        {
            var HL = $$('Hours')[i].style;
            HL.top = y[i] + HandY + (i * HandHeight) * Math.sin(hrs) + scrll;
            HL.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 < A.length; i++)
        {
            var AL = $$('Alarm')[i].style;
            AL.top = y[i] + HandY + (i * HandHeight) * Math.sin(currStep2 ) + scrll;
            AL.left = x[i] + HandX + (i * HandWidth) * Math.cos(currStep2 );
        }
        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);
        }
    
        if (alarm === "設定" && Number.isNaN(normalizedAlarmRadian)) {
            normalizedAlarmRadian = normalizeRadian(currStep2);
        }
        timeCheck(hrs);
    
        currStep -= step;
        currStep2 = normalizeRadian(currStep2 - step2);
    }
    
    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();
    }());
    </script>
    </body>
    </html>
    
[/code]

`timeCheck` 関数は、現在の針の角度を使う必要があるので、 `ClockAndAssign` 関数の最後の方で呼び出す形に変更しています。

目安針の角度を示す `normalizedAlarmRadian` の設定を、ボタンをクリックしたときに呼び出される `changeFlg`
関数内で計算するのは難しいです。  
このため、 `changeFlg` 関数で `alarm = "設定"` に設定した後、最初に `ClockAndAssign` 関数が実行されたときに
`normalizedAlarmRadian` を更新するようにしています。

ちなみに、 この書き方だと、 timeCheck の引数 (`hrs`) を長針の角度 (`min`) や秒針の角度 (`sec`)
を示す変数に書き換えてみても、期待通りに動くので、汎用性があります。  
実際に動かして検証しようとすると、短針が目安針と交差するまで待つのに時間がかかって骨が折れるので、秒針に置き換えてみると動作確認がしやすくなります。

なお、 JavaScript でコードを書く場合、やむを得なく外部から呼び出す必要がある場合を除き、 `"use strict"`
と先頭に書かれている無名関数の **中** に全てのロジックを書いた方が良いです。  
詳しくは "use strict" で調べてみてください。  
この変更のため、 `<input ...>` 要素の onClick 属性から、 `changeFlg` 関数が参照できない（スコープ外）になっているため、
`addEventListener` メソッドを使って JavaScript 内から click イベントハンドラの関数 (`changeFlg`)
の登録を行っています。

* * *

正直言うと、大本のコード自体が雑(ｹﾞﾌﾝｹﾞﾌﾝ  
書き方がかな～り古いです。

修正例として書いたコードも、今の時代ではふさわしくないコードになっています。

三角関数やロジックの勉強が目的であればこれでも良いのですが、これから JavaScript
学んでいく上では、もう少し最近に書かれたものにした方が良いと思います。  
JavaScript も、 HTML DOM も、この 10年で大きく書き方が変わってきているので。

