www.webdeveloper.com
Results 1 to 4 of 4

Thread: Making a count down clock repeat daily..

Hybrid View

  1. #1
    Join Date
    Jul 2010
    Posts
    71

    Question Making a count down clock repeat daily..

    What im trying to do is have a count down timer count down to the same time every day. For example, if i set it to count down to July 9th 2010 8:00pm. At 8pm i want it to pause or wait for 30 min. During that time i want it to display some text. After that 30min is up i want to reset it to count down to the same time the next day. (July 9th 2010 8:00pm) ect. I figgured maybe adding 23 1/2 hours to it but i dont even no how to reset this thing, let alone change the time it counts down to.

    Im not asking any one to do this for me (though i wouldnt hate it) but i really need some direction. All i really think i know is that some functions nned to be placed n the "Else - (if variable = 0) then ........."

    Here is the javascript im using (it works but does not reset) it also takes some information from php:
    Code:
    // Here’s where the Javascript starts
    countdown = <?=$diff?>;
    
    // Converting date difference from seconds to actual time
    function convert_to_time(secs)
    {
    	secs = parseInt(secs);	
    	hh = secs / 3600;	
    	hh = parseInt(hh);	
    	mmt = secs - (hh * 3600);	
    	mm = mmt / 60;	
    	mm = parseInt(mm);	
    	ss = mmt - (mm * 60);	
    		
    	if (hh > 23)	
    	{	
    	   dd = hh / 24;	
    	   dd = parseInt(dd);	
    	   hh = hh - (dd * 24);	
    	} else { dd = 0; }	
    		
    	if (ss < 10) { ss = "0"+ss; }	
    	if (mm < 10) { mm = "0"+mm; }	
    	if (hh < 10) { hh = "0"+hh; }	
    	if (dd == 0) { return (hh+":"+mm+":"+ss); }	
    	else {	
    		if (dd > 1) { return (dd+" days "+hh+":"+mm+":"+ss); }
    		else { return (dd+" day "+hh+":"+mm+":"+ss); }
    	}	
    }
    
    // Our function that will do the actual countdown
    function do_cd()
    {
    	if (countdown < 0)	
    	{ 	
    		<?php
    			if(strtolower(trim($_GET['do'])) == 'r' )
    			{
    		?>
    		// redirect web page
    		document.location.href = "<?=$_GET['data']?>";
    		<?php } ?>
    
    		<?php
    			if(strtolower(trim($_GET['do'])) == 't' )
    			{
    		?>
    		// change text
    		document.getElementById('cd').innerHTML = "<?=$_GET['data']?>";
    		<?php } ?>
    
    	}	
    	else	
    	{	
    		document.getElementById('cd').innerHTML = convert_to_time(countdown);
    		setTimeout('do_cd()', 1000);
    	}	
    	countdown = countdown - 1;	
    }
    
    document.write("<div id='cd'></div>\n");
    
    do_cd();
    
    <? exit(); ?>
    Code in the body:
    Code:
    <SCRIPT language="JavaScript" SRC="countdown.php?timezone=America/Indianapolis&countto=2010-07-08 16:00:00&do=t&data=Dead Front Has Began!"></SCRIPT>
    Text displayed after count down is here^^

    Thanks in advance
    -ZZy

    PS i had to retype this twice cause the site logged me out b4 i could post!

  2. #2
    Join Date
    Jul 2010
    Posts
    71
    for some reason i cant edit posts on this forum and i left out a peice of info. The date is n YYYY:MMD time is HH:MM:SS and it is a 24 hour clock

  3. #3
    Join Date
    Apr 2010
    Posts
    121

    Post

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style style="text/css">

    .lcdstyle{ /*Example CSS to create LCD countdown look*/
    background-color:black;
    color:lime;
    font: bold 18px MS Sans Serif;
    padding: 3px;
    }

    .lcdstyle sup{ /*Example CSS to create LCD countdown look*/
    font-size: 80%
    }

    </style>

    <script type="text/javascript">

    /***********************************************
    * Universal Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/

    function cdLocalTime(container, servermode, offsetMinutes, targetdate, debugmode){
    if (!document.getElementById || !document.getElementById(container)) return
    this.container=document.getElementById(container)
    var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s"time())?>' : (servermode=="server-ssi")? '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>'
    this.localtime=this.serverdate=new Date(servertimestring)
    this.targetdate=new Date(targetdate)
    this.debugmode=(typeof debugmode!="undefined")? 1 : 0
    this.timesup=false
    this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time
    this.updateTime()
    }

    cdLocalTime.prototype.updateTime=function(){
    var thisobj=this
    this.localtime.setSeconds(this.localtime.getSeconds()+1)
    setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
    }

    cdLocalTime.prototype.displaycountdown=function(baseunit, functionref){
    this.baseunit=baseunit
    this.formatresults=functionref
    this.showresults()
    }

    cdLocalTime.prototype.showresults=function(){
    var thisobj=this
    var debugstring=(this.debugmode)? "<p style=\"background-color: #FCD6D6; color: black; padding: 5px\"><big>Debug Mode on!</big><br /><b>Current Local time:</b> "+this.localtime.toLocaleString()+"<br />Verify this is the correct current local time, in other words, time zone of count down date.<br /><br /><b>Target Time:</b> "+this.targetdate.toLocaleString()+"<br />Verify this is the date/time you wish to count down to (should be a future date).</p>" : ""

    var timediff=(this.targetdate-this.localtime)/1000 //difference btw target date and current date, in seconds
    if (timediff<0){ //if time is up
    this.targetdate.setDate(this.targetdate.getDate()+1)
    }
    var oneMinute=60 //minute unit in seconds
    var oneHour=60*60 //hour unit in seconds
    var oneDay=60*60*24 //day unit in seconds
    var dayfield=Math.floor(timediff/oneDay)
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
    if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
    hourfield=dayfield*24+hourfield
    dayfield="n/a"
    }
    else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
    minutefield=dayfield*24*60+hourfield*60+minutefield
    dayfield=hourfield="n/a"
    }
    else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
    var secondfield=timediff
    dayfield=hourfield=minutefield="n/a"
    }
    this.container.innerHTML=debugstring+this.formatresults(dayfield, hourfield, minutefield, secondfield)
    setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
    }

    /////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

    //Create your own custom format function to pass into cdLocalTime.displaycountdown()
    //Use arguments[0] to access "Days" left
    //Use arguments[1] to access "Hours" left
    //Use arguments[2] to access "Minutes" left
    //Use arguments[3] to access "Seconds" left

    //The values of these arguments may change depending on the "baseunit" parameter of cdLocalTime.displaycountdown()
    //For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
    //For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc

    //1) Display countdown using plain text
    function formatresults(){
    if (this.timesup==false){//if target date/time not yet met
    var displaystring="<span style='background-color: #CFEAFE'>"+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds</span> left until launch time"
    }
    else{ //else if target date/time met
    var displaystring="Launch time!"
    }
    return displaystring
    }

    //2) Display countdown with a stylish LCD look, and display an alert on target date/time
    function formatresults2(){
    if (this.timesup==false){ //if target date/time not yet met
    var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> left until 5:00pm server time."
    }
    else{ //else if target date/time met
    var displaystring="" //Don't display any text
    alert("Launch time!") //Instead, perform a custom alert
    }
    return displaystring
    }

    </script>
    </head>
    <body>
    <div id="cdcontainer"></div>
    <script type="text/javascript">
    var servermode='server-php' //Set to server mode
    var targettime='17:00:00' //Set to target time leave seconds as 00
    var container='cdcontainer' //Set to name of container
    var offsetMinutes=0 //Set to LocaltimeoffsetMinutes
    /////////////////// Stop Editing ///////////////////
    var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s"time())?>' : (servermode=="server-ssi")? '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>'
    var prep=new Date(servertimestring); prep.months=['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    prep.limit=targettime.split(':');
    for (var i_tem = 0; i_tem < prep.limit.length; i_tem++)
    prep.limit[i_tem]=parseInt(prep.limit[i_tem], 10);
    if(prep.getHours()>prep.limit[0]||(prep.getHours()==prep.limit[0]&&prep.getMinutes()>=prep.limit[1]))
    prep.setDate(prep.getDate()+1);
    prep.base=prep.months[prep.getMonth()]+' '+prep.getDate()+', '+prep.getFullYear()+' '+targettime;
    var launchdate=new cdLocalTime(container, servermode, offsetMinutes, prep.base);
    launchdate.displaycountdown("days", formatresults2);
    </script>

    </body>
    </html>
    Try That?

  4. #4
    Join Date
    Apr 2010
    Posts
    121
    After a certain amount of time, you can no longer edit your post.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles