34447


下記のコードは、アナログ時計のマウスストーカーにBGSOUNDを利用してアラーム機能を付けたものです(音は、各自好みの音を取り込んでください)。しかし、設定時刻が来るとアラームは鳴るのですが、メッセージは切り替わりません。どのように書き換えたら、アラームが鳴るのと同時にメッセージが切り替わるようになるでしょうか。  
アラームと関係がある箇所は、"function ClockAndAssign()  
{}"内の上の方と、スクリプトの一番下にある"function changeFlg(){}"内です。  
長くなりますが、よろしくお願いします。

[code]

    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
             <bgsound id="bgm" src="〇〇.mid" loop="-1">
    </head>
    
    <body bgcolor="black">
    
    <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>
    
    <FORM NAME="sampleForm" style="position:absolute; bottom:10%; width:100%; text-align:center;">
       <INPUT name="setAlarm" type="button" value="アラームを設定" onClick="changeFlg();">
       <INPUT type="text" name="alarmH" size=2 value="00">:
       <INPUT type="text" name="alarmM" size=2 value="00">
    </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);
    }
    
    
    var dCol = 'ff0099', //date colour.
        sCol = '808080', //seconds colour.
        mCol = 'ffff00', //minutes colour.
        hCol = 'ffff00', //hours colour.
        fCol = '00ff00', //face color
        ClockHeight = 40,
        ClockWidth = 40,
        ClockFromMouseY = 0,
        ClockFromMouseX = 100;
    
    var msg = "これは、アラーム･クロックです。";
    var D = msg.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 = 250,
        xmouse = 500,
        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,
        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 = null;
    
    function ClockAndAssign() 
    {
    var msg = "これは、アラーム･クロックです。";
    
    var Now = new Date();
    var hou = Now.getHours();
    var min = Now.getMinutes();
    
    if((flg == 1) && (document.sampleForm.alarmH.value == hou) && (document.sampleForm.alarmM.value == min)){
    flg=-1;
    bgm.src="△△.wav";
    step=0.02;
    var msg = "早く起きてください。";
    }
    
    var D = msg.split('');
    
    // 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;
    
        var time = new Date();
        var secs = time.getSeconds();
        var sec = -1.57 + Math.PI * secs / 30;
        var mins = time.getMinutes();
        var min = -1.57 + Math.PI * mins / 30;
        var hr = time.getHours();
        var hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes(), 10) / 360;
        $('Od').style.top = window.document.body.scrollTop;
        $('Of').style.top = window.document.body.scrollTop;
        $('Oh').style.top = window.document.body.scrollTop;
        $('Om').style.top = window.document.body.scrollTop;
        $('Os').style.top = window.document.body.scrollTop;
        for (i = 0; i < n; i++)
        {
            var F = $$('Face')[i];
            F.style.top = y[i] + ClockHeight * Math.sin(-1.0471 + i * Split * Math.PI / 180) + scrll;
            F.style.left = x[i] + ClockWidth * Math.cos(-1.0471 + i * Split * Math.PI / 180);
        }
        for (i = 0; i < H.length; i++)
        {
            var HL = $$('Hours')[i];
            HL.style.top = y[i] + HandY + (i * HandHeight) * Math.sin(hrs) + scrll;
            HL.style.left = x[i] + HandX + (i * HandWidth) * Math.cos(hrs);
        }
        for (i = 0; i < M.length; i++)
        {
            var ML = $$('Minutes')[i].style;
            ML.top = y[i] + HandY + (i * HandHeight) * Math.sin(min) + scrll;
            ML.left = x[i] + HandX + (i * HandWidth) * Math.cos(min);
        }
        for (i = 0; i < S.length; i++)
        {
            var SL = $$('Seconds')[i].style;
            SL.top = y[i] + HandY + (i * HandHeight) * Math.sin(sec) + scrll;
            SL.left = x[i] + HandX + (i * HandWidth) * Math.cos(sec);
        }
        for (i = 0; i < D.length; i++)
        {
            var DL = $$('Date')[i].style;
            DL.top = Dy[i] + ClockHeight * 1.5 * Math.sin(currStep + i * Dsplit * Math.PI / 180) + scrll;
            DL.left = Dx[i] + ClockWidth * 1.5 * Math.cos(currStep + i * Dsplit * Math.PI / 180);
        }
        currStep -= step;
    }
    
    
    function Delay() 
    {
        scrll = 0;
        Dy[0] = Math.round(DY[0] += ((ymouse) - DY[0]) * speed);
        Dx[0] = Math.round(DX[0] += ((xmouse) - DX[0]) * speed);
        for (i = 1; i < D.length; i++) {
            Dy[i] = Math.round(DY[i] += (Dy[i - 1] - DY[i]) * speed);
            Dx[i] = Math.round(DX[i] += (Dx[i - 1] - DX[i]) * speed);
        }
        y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
        x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);
        for (i = 1; i < n; i++) {
            y[i] = Math.round(Y[i] += (y[i - 1] - Y[i]) * speed);
            x[i] = Math.round(X[i] += (x[i - 1] - X[i]) * speed);
        }
        ClockAndAssign();
        setTimeout(Delay, 20);
    }
    
    Delay();
    
    var flg = 0;
    function changeFlg(){
      if(flg == 0){
        flg =1;
    　　document.sampleForm.setAlarm.value=" alarmOff ";
        bgm.src="";
    }else{
       flg =0;
       document.sampleForm.setAlarm.value=" alarmON ";
       bgm.src="〇〇.mid";
       step=0;
        }
    }
    document.sampleForm.setAlarm.onclick=changeFlg;
    }());
    
    </script>
    
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2017-05-03T05:31:11.193
34429
2017-05-04T07:59:55.300
20431
question
javascript
アラーム設定時刻が来てアラームが鳴るのと同時に、メッセージを切り替える方法について


はじめに、IEやChromeの開発者ツール(`F12`キー押下)を利用して **デバッグ** することをお勧めします。  
ひとつひとつの処理を追えば解決する内容です。

> どのように書き換えたら、アラームが鳴るのと同時にメッセージが切り替わるようになるでしょうか。

問題の箇所のみ抜粋します。

[code]

    var msg = "これは、アラーム･クロックです。";
    var D = msg.split('');
      :
      :
      :
    function ClockAndAssign() {
        var msg = "これは、アラーム･クロックです。";
    
        var Now = new Date();
        var hou = Now.getHours();
        var min = Now.getMinutes();
    
        if ((flg == 1) && (document.sampleForm.alarmH.value == hou) && (document.sampleForm.alarmM.value == min)) {
            flg = -1;
            bgm.src = "△△.wav";
            step = 0.02;
            var msg = "早く起きてください。";
        }
    
        var D = msg.split('');
          :
          :
          :
    }
    
[/code]

まず、関数`ClockAndAssign()`は何度も呼び出されます。  
その関数内で定義した変数`msg`の初期値は「これは、アラーム･クロックです。」です。  
`flg == 1`の場合、変数`msg`を「早く起きてください。」に書き換えますが、同時に`flg =
-1`としているため、メッセージが切り替わるのはその一瞬だけです。  
次に関数が呼び出されると、`flg == 1`ではないので変数`msg`は初期値となります。

次に、グローバル変数`msg`と関数`ClockAndAssign()`で定義したローカル変数`msg`が存在しますが、二つの変数は区別されます。  
現状、メッセージの切り替えはローカル変数`msg`を使用しているので、グローバル変数`msg`はメッセージの切り替えに影響せず、最初の処理`var D =
msg.split('');`以降は何の意味もありません。

解決策は、関数`ClockAndAssign()`で定義したローカル変数`msg`を使用せず、グローバル変数`msg`を使用してメッセージを切り替えます。  
関数を何度も呼び出されても、グローバル変数`msg`は`flg == 1`の場合のみ書き換えます。

アラームを停止した場合にメッセージを元に戻す処理はご自身で考えてください。

[code]

    var msg = "これは、アラーム･クロックです。";
      :
      :
      :
    function ClockAndAssign() {
        var Now = new Date();
        var hou = Now.getHours();
        var min = Now.getMinutes();
    
        if ((flg == 1) && (document.sampleForm.alarmH.value == hou) && (document.sampleForm.alarmM.value == min)) {
            flg = -1;
            bgm.src = "△△.wav";
            step = 0.02;
            msg = "早く起きてください。";
        }
    
        var D = msg.split('');
          :
          :
          :
    }
    
[/code]


CC BY-SA 3.0
2017-05-04T02:30:28.617
34447
2017-05-04T07:59:55.300
2017-05-04T07:59:55.300
9566
9566
34429
answer