0

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

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

1 件の回答 1

1

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

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

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

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('');
      :
      :
      :
}

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

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

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

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

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('');
      :
      :
      :
}
1
  • 回答ありがとうございました。グローバル変数msgとローカル変数msgを区別するのですね。思いつきもしなかったので、助かりました。無事、解決しました。元に戻す処理も、function changeFlg(){}内のelse{}内にグローバル変数msgを入れて解決しました。
    – user20431
    Commented 2017年5月4日 4:14

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。