Why does my alarmclock script stop working?

后端未结

关注

 2  1729

死守一世寂寞

It only works once. At second button click, nothing occurs.

If I change budilnik variable at i_budilnik or var budilnik, it do

相关标签:

2条回答

借酒劲吻你

2021-01-15 18:36

How about this?

You can't hear the"alarm" in this code, so you have to download the sound you like, rewrite a part of the 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>Yokai clock～The digital clock changes to the analogue one！？～</TITLE> 


<SCRIPT type="text/javascript">
<!--

var flg =0;

function timeCheck(){

    Now = new Date();
    Hour = Now.getHours();
    Min = Now.getMinutes();
    Sec = Now.getSeconds();

        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";
flg=-1; //＊One figure other than 0 and 1
　　}
}


function changeFlg(){
    if(flg == 0){  
　　　　document.sampleForm.setAlarm.value=" alarmOFF ";
                document.getElementById("bgCol").value="";
　　　　　　　　selectBgm(document.getElementById('bgCol'));
      　　　　  flg =1;
    }else{
        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";
　　　　　　    flg =0;
    }
}

      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="" >STOP</OPTION>
         <OPTION style="background:#87cefa" value="２２２.mid" selected>CLASSIC</OPTION>
         <OPTION style="background:yellowgreen" value="３３３.wav">ALARM</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>

0 讨论(0)

一向

2021-01-15 18:42

You call the function wr_hours(); only once... with the onclick budilnik is called, but that doesn't touch wr_hours again. The first time the code is run, because the page is loaded, but after that, with the onclick only the values of min and hour are set again.

edit: you shouldn't call your form "alert", since that's a reserved word in javascript, same for the variable min. also: the variables min and hour are defined in the function budilnik, but they're not known outside this scope. I also renamed the variable budilnik to a global variable justonce to make sure you can check it outside the scope of budilnik. I rewrote your code a bit:

<html>
<body>
    <div>
        <form name="frm">
            <input type="text" name="hour" />
            <input type="text" name="mins"/>
            <input type="button" value="ok" onclick="justonce=1;">
        </form>
        <font color=#660000 size=20 face=Tahoma><span id="hours"></span></font>
    </div>
</body>
</html>

<script type="text/javascript">
obj_hours=document.getElementById("hours");
justonce=0;

function wr_hours()
{
    time=new Date();

    time_min=time.getMinutes();
    time_hours=time.getHours();

    time_wr=((time_hours<10)?"0":"")+time_hours;
    time_wr+=":";
    time_wr+=((time_min<10)?"0":"")+time_min;

    obj_hours.innerHTML=time_wr;

    if (justonce==1 && frm.mins.value==time_min && frm.hour.value==time_hours) {
            alert('welldone');
            justonce=0;
    }
}

setInterval("wr_hours();",1000);
</script>

Your function wr_hours could be a lot shorter by the way:

function wr_hours()
{
    time=new Date();

    obj_hours.innerHTML=("%02d",time.getHours())+":"+("%02d",time.getMinutes());

    if (justonce==1
        && frm.mins.value==time.getMinutes()
        && frm.hour.value==time.getHours()) {
        alert('welldone');
            justonce=0;
    }
}

0 讨论(0)