CSS Codes
CSS Layouts
Results 1 to 3 of 3

Thread: Need help with countdown timers

  1. 03-23-2016, 07:34 PM #1
    Mooij
    Mooij is offline New Comer (less than 5 posts)
    Join Date
    Mar 2016
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Need help with countdown timers

    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:


    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!
    Reply With Quote Reply With Quote
  2. 03-24-2016, 02:34 AM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,475
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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/s...ipt-Auto-start
    Last edited by jscheuer1; 03-24-2016 at 02:49 AM. Reason: add link to other thread
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  3. 03-24-2016, 06:10 AM #3
    Mooij
    Mooij is offline New Comer (less than 5 posts)
    Join Date
    Mar 2016
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for your answer!

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

    HTML:
    Code:
    <!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:

    Code:
    
	
    Code:
    
	
    /* 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 */
}
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. 60 and 15 minute countdown timers
    By GUIDesigner in forum JavaScript
    Replies: 3
    Last Post: 01-16-2021, 11:19 PM
  2. Countdown timers
    By kadi in forum JavaScript
    Replies: 1
    Last Post: 08-07-2013, 02:22 AM
  3. CountDown Timers -> vB Sig
    By Freshfroot in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-10-2008, 10:39 PM
  4. Do timers stop all code?
    By Olynsky in forum JavaScript
    Replies: 1
    Last Post: 04-14-2008, 11:45 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules