Why does my alarmclock script stop working?
It only works once. At second button click, nothing occurs.
If I change budilnik variable at i_budilnik or var budilnik, it doesn't work even once!
Where is the problem?
<div>
<form name="alert">
<input type="text" name="hour" />
<input type="text" name="min" />
<input type="button" value="ok" onclick="budilnik(this.form)">
</form><font color=#660000 size=20 face=Tahoma><span id="hours"></span>
</div>
<script type="text/javascript">
function budilnik(form) {
budilnik = 1;
min = form.min.开发者_开发问答value;
hour = form.hour.value;
}
obj_hours = document.getElementById("hours");
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;
time_wr = time_wr;
obj_hours.innerHTML = time_wr;
if (i_budilnik == 1) {
if (min == time_min) {
if (hour == time_hours) {
alert('welldone');
budilnik = 0;
}
}
}
}
wr_hours();
setInterval("wr_hours();", 1000);
</script>
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;
}
}
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>
加载中,请稍侯......
精彩评论