Log in

View Full Version : Need help with countdown timers


Mooij
03-23-2016, 07:34 PM
Hello,

Ik need some help with two countdown javascripts.
The first one must be started at 10pm and countdown to 10am next day.
The second one must be started at 10pm and repeat counting 30 minutes down for 24 times (24*30minutes=12 hours) till 10am next day.

I'm using the following code:



// JavaScript Document
*/

/* */
var current="End!!"; //-->enter what you want the script to display when the target date and time are reached, limit to 20 characters
var year=2016; //-->Enter the count down target date YEAR
var month=03; //-->Enter the count down target date MONTH
var day=26; //-->Enter the count down target date DAY
var hour=10; //-->Enter the count down target date HOUR (24 hour clock)
var minute=00; //-->Enter the count down target date MINUTE
var tz=+1; //-->Offset for your timezone in hours from UTC (see http://wwp.greenwichmeantime.com/index.htm to find the timezone offset for your location)

//--> DO NOT CHANGE THE CODE BELOW! <--
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");

function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}

function countdown(yr,m,d,hr,min){
theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
var today=new Date();
var todayy=today.getYear();
if (todayy < 1000) {todayy+=1900;}
var todaym=today.getMonth();
var todayd=today.getDate();
var todayh=today.getHours();
var todaymin=today.getMinutes();
var todaysec=today.getSeconds();
var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);
var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
var dd=futurestring-todaystring;
var dday=Math.floor(dd/(60*60*1000*24)*1);
var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1) + (dday*24);
var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
document.getElementById('count2').innerHTML=current;
document.getElementById('count2').style.display="inline";
document.getElementById('count2').style.width="390px";
document.getElementById('dhour').style.display="none";
document.getElementById('dmin').style.display="none";
document.getElementById('dsec').style.display="none";
document.getElementById('hours').style.display="none";
document.getElementById('minutes').style.display="none";
document.getElementById('seconds').style.display="none";
document.getElementById('spacer1').style.display="none";
document.getElementById('spacer2').style.display="none";
return;
}
else {
document.getElementById('count2').style.display="none";
document.getElementById('dhour').innerHTML=dhour;
document.getElementById('dmin').innerHTML=dmin;
document.getElementById('dsec').innerHTML=dsec;
setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
}
}

Is there anyone who can help me?

Thanks a lot!
jscheuer1
03-24-2016, 02:34 AM
Without the markup (HTML) that goes with this code it's hard to tell. I set up a simple demo with all of the referenced elements (most likely not in the way they were intended, but just to see if the code did anything) and it sort of worked. There seems to be a superfluous function that does nothing in particular and that's not referenced by, nor references anything else in the other code nor elements referenced by the other code (checkTime) and another that needs input to do anything (countdown(yr,m,d,hr,min)), the latter requiring markup that it references as well as said input to do anything. Have you actually tried using any of this code? In any case here is a sort of working demo:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<div id="count2"></div>
<div id="dhour"></div>
<div id="dmin"></div>
<div id="dsec"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
<div id="spacer1"></div>
<div id="spacer2"></div>
<script type="text/javascript">
// JavaScript Document
var current="End!!"; //-->enter what you want the script to display when the target date and time are reached, limit to 20 characters
var year=2016; //-->Enter the count down target date YEAR
var month=03; //-->Enter the count down target date MONTH
var day=26; //-->Enter the count down target date DAY
var hour=10; //-->Enter the count down target date HOUR (24 hour clock)
var minute=00; //-->Enter the count down target date MINUTE
var tz=+1; //-->Offset for your timezone in hours from UTC (see http://wwp.greenwichmeantime.com/index.htm to find the timezone offset for your location)

//--> DO NOT CHANGE THE CODE BELOW! <--
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");

function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}

function countdown(yr,m,d,hr,min){
theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
var today=new Date();
var todayy=today.getYear();
if (todayy < 1000) {todayy+=1900;}
var todaym=today.getMonth();
var todayd=today.getDate();
var todayh=today.getHours();
var todaymin=today.getMinutes();
var todaysec=today.getSeconds();
var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);
var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
var dd=futurestring-todaystring;
var dday=Math.floor(dd/(60*60*1000*24)*1);
var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1) + (dday*24);
var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
document.getElementById('count2').innerHTML=current;
document.getElementById('count2').style.display="inline";
document.getElementById('count2').style.width="390px";
document.getElementById('dhour').style.display="none";
document.getElementById('dmin').style.display="none";
document.getElementById('dsec').style.display="none";
document.getElementById('hours').style.display="none";
document.getElementById('minutes').style.display="none";
document.getElementById('seconds').style.display="none";
document.getElementById('spacer1').style.display="none";
document.getElementById('spacer2').style.display="none";
return;
}
else {
document.getElementById('count2').style.display="none";
document.getElementById('dhour').innerHTML=dhour;
document.getElementById('dmin').innerHTML=dmin;
document.getElementById('dsec').innerHTML=dsec;
setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
}
}
countdown(2016,5,6,10,23)
</script>
</body>
</html>

Now, if you're quick/lucky/whatever, that might do it for you. But likely you will have more questions, feel free to ask. Please include any additional code/information that might make it clearer as to what you are trying/doing.

You may also want to have a look at this thread:

http://www.dynamicdrive.com/forums/showthread.php?79739-3D-Cube-CountDown-script-Auto-start
Mooij
03-24-2016, 06:10 AM
Thank you for your answer!

For completing the information, I post de HTML and CSS code for this question.

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Clock 2</title>
<link rel="stylesheet" href="clock2.css" type="text/css" media="all" />
<script type="text/javascript" src="clock2.js"></script>
</head>

<body onload="countdown(year,month,day,hour,minute)">
<table id="table" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" colspan="6"><div class="numbers" id="count2" style="padding: 5px 0 0 0; "></div></td>
</tr>
<tr id="spacer1" height="30">
<td align="center" ><div class="numbers" ></div></td>
<td align="center" ><div class="numbers" id="dhour"></div></td>
<td align="center" ><div class="numbers" id="dmin"></div></td>
<td align="center" ><div class="numbers" id="dsec"></div></td>
<td align="center" ><div class="numbers" ></div></td>
</tr>
<tr id="spacer2" height="12">
<td align="center" ><div class="title" ></div></td>
<td align="center" ><div class="title" id="hours">Uur</div></td>
<td align="center" ><div class="title" id="minutes">Minuten</div></td>
<td align="center" ><div class="title" id="seconds">Seconden</div></td>
<td align="center" ><div class="title" ></div></td>
</tr>
</table>

</body>
</html>

CSS:



/* CSS Document */
.numbers {
width: 40px;
text-align: center;
font-family: Arial;
font-size: 40px;
font-weight: bold; /* options are normal, bold, bolder, lighter */
font-style: normal; /* options are normal or italic */
color: #F20C10; /* change color using the hexadecimal color codes for HTML */
}
.title { /* the styles below will affect the title under the numbers, i.e., "Days", "Hours", etc. */
width: 40px;
text-align: center;
font-family: Arial;
font-size: 12px;
font-weight: bold; /* options are normal, bold, bolder, lighter */
color: #dddddd; /* change color using the hexadecimal color codes for HTML */
}
#table {
width: 300px;
height: 85px;
border-style: none;
background-color: transparent;
margin: 0px auto;
position: relative; /* leave as "relative" to keep timer centered on your page, or change to "absolute" then change the values of the "top" and "left" properties to position the timer */
top: 0px; /* change to position the timer */
left: 0px; /* change to position the timer; delete this property and it's value to keep timer centered on page */
}