21746


下記のソースコードは、デジタルの目覚まし時計の目覚ましをセットして、時間が来るとデジタル時計は消え、目覚まし音とともに"アナログ時計"が現れるように設定したものですが、目覚まし音はアナログ時計が現れて"1分後"に鳴り始めます。セレクトの表示は、アナログ時計が現れるのと同時に切り替わります。どうすれば、目覚まし音も時間通りに切り替わるか、ご教示ください。

なお、音は出ないように設定しています。

[code]

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
            <HTML>
            <HEAD>
            <META http-equiv="Content-Type" content="text/html; charset=shift_jis"> 
            <meta http-equiv="Content-Style-Type" content="text/css">
            <meta http-equiv="Content-Script-Type" content="text/javascript">
    
            <bgsound id="bgm" src="２２２.mid" loop="-1">
    
            <TITLE>デジタル時計がアナログ時計に！</TITLE> 
    
    
            <!--- 時計 JavaScript ---> 
            <SCRIPT type="text/javascript">
            <!--
            //アラームフラグを初期化する。
            var flg =0;
    
            //時刻更新＆アラームチェックファンクション
            function timeCheck(){
                //時刻を取得。
                Now = new Date();
                Hour = Now.getHours();
                Min = Now.getMinutes();
                Sec = Now.getSeconds();
    
               // "分"と"秒"が1桁の場合、頭に0を付けて2桁で表示する指定
                    if(Hour <= 9) { 
                                   Hour = "\u0020" + Hour; 
            }        
            　　　　if(Min <= 9) { 
                                   Min = "0" + Min; 
            }
                    if(Sec <= 9) { 
                                   Sec = "0" + Sec; 
            }
    
    
                //時刻を表示。
                document.sampleForm.dspTime.value=Hour + ":" + Min + ":" + Sec;
    
    
    
                //時刻をチェック。
    
            if((flg == 1)&&(document.sampleForm.alarmH.value == Hour)&&(document.sampleForm.alarmM.value == Min)){
            document.getElementById('bgCol').value="３３３.wav", selectBgm(document.getElementById('bgCol')),
            document.getElementById('star_clock').style.visibility="hidden", document.getElementById('clock').style.visibility="visible";
            }
     }
    
            //アラームフラグ変更ファンクション
    
        function changeFlg(){
          if(flg == 0){
            //アラーム未設定時、  
            flg =1;
            　document.sampleForm.setAlarm.value=" alarmOFF ";
              document.getElementById("bgCol").value="";
              selectBgm(document.getElementById('bgCol'));
          }else{
            //アラーム設定済み時、
            flg =0;
             document.sampleForm.setAlarm.value=" alarm ON ";
             document.getElementById("bgms").reset();
             selectBgm(document.getElementById('bgCol'));
             document.getElementById('star_clock').style.visibility="visible";
             document.getElementById('clock').style.visibility="hidden";
                }
            }
    
    　　//次の更新をセットする。
          setInterval(timeCheck,100);
                  window.onload = timeCheck;
            //-->
            </SCRIPT>
    
            <script type="text/javascript">
             <!--
               function selectBgm(e){
                var selectedIndex = e.selectedIndex;
                    document.getElementById("bgCol").style.background=e[selectedIndex].style.backgroundColor;
                    bgm.src= e[selectedIndex ].value; 
                    document.getElementById("bgCol").value=e[selectedIndex].value;
            }
             //-->
            </script>
            </head>
    
    
            <BODY color="gold" bgcolor="black">
    
    
            <div id="clock" style="visibility:hidden">
                <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 = '008000', //minutes colour.
                hCol = '008000', //hours colour.
                fCol = '0000ff', //face color
                ClockHeight = 40,
                ClockWidth = 40,
                ClockFromMouseY = 0,
                ClockFromMouseX = 100,
                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 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();
                setTimeout(Delay, 20);
            }
            Delay();
            }());
            </script>
    
    
                <form id="bgms" style="text-align:right">
                   <SELECT id="bgCol" style="background:#87cefa"; onchange="selectBgm(this);">
                     <OPTION style="background:silver" value="" >選曲(停止)</OPTION>
                     <OPTION style="background:#87cefa" value="２２２.mid" selected>２２２(クラシック)</OPTION>
                     <OPTION style="background:yellowgreen" value="３３３.wav">３３３(目覚まし音)</OPTION>
                   </SELECT>
                </form>
    
            <FORM  NAME="sampleForm" style="text-align:center">
            　<font id="star_clock">
            <INPUT id="Alarmy" type="text"STYLE="color:deeppink; background-color:black; font-size:25px; border:none;" size=7 NAME="dspTime">
            　</font>
            <br><br>
            <br><br>
            　<div>
            ★
            <INPUT type="text" name="alarmH" size=2 value="00">
            <INPUT type="text" name="alarmM" size=2 value="00">
            <INPUT type="button" id="setAlarm" name="setAlarm" value=" alarm ON " onClick="changeFlg();">
            ★
            　</div>
            </FORM>
    
            </BODY>
            </HTML>
    
[/code]


CC BY-SA 3.0
2015-12-06T09:45:05.893
19682
2016-02-09T15:07:49.053
2016-02-09T15:07:49.053
9359
9359
question
javascript
目覚まし音も、"1分"遅れに鳴るのではなく、時間が来たら鳴るようにする方法について


まず最初に、

問題が起こっているソースを全て張るのではなく、質問のある箇所、調べる箇所に対してのみ抽出すると、問題の解消ができると思います。例えば時計のデザインが変わったと同時にアラームがなれば良いのですから、

何かのイベントが発生したと同時にアラームがなるかどうかを検証されてから、  
デザインなどを実装されるのが良いでしょう。

なお、bgsound要素はInternetExplorerでのみ動作するタグですので、ご注意ください。


CC BY-SA 3.0
2015-12-06T14:25:47.077
19689
2015-12-06T14:25:47.077
5778
19682
answer


時計のjavascriptの"時刻をチェック"のところを、  
下記のように"flg=0(又は,1);"以外の数字(＊2でも,2.5でも,３でも,又は-1でも,  
-1.5でも可能のようです)を付け加えれば、目覚ましの設定時刻と同時に  
目覚まし音が鳴りました。

(追加箇所)

[code]

        //時刻をチェック。
    if((flg == 1)&&(document.sampleForm.alarmH.value == Hour)&&(document.sampleForm.alarmM.value == Min)){
    document.getElementById('bgCol').value="３３３.wav", selectBgm(document.getElementById('bgCol')),
    document.getElementById('star_clock').style.visibility="hidden", document.getElementById('clock').style.visibility="visible";
    flg=-1;
    }
    
[/code]

どうして"flg=0(又は,1);"以外の数字だったら、目覚ましの設定時刻と同時に  
目覚まし音が鳴るのか，この理由はわかっていませんが。


CC BY-SA 3.0
2016-02-05T09:36:41.517
21746
2016-02-07T14:09:34.230
2016-02-07T14:09:34.230
8000
9359
19682
answer