SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to create a Count Down Cllock

    Hello,

    We want to create a Count Down Clock which in real time counts down to a given date.

    I think this function needs to be a combination of Php & JavaScript or Ajax.
    But since there is no forum for Php & JavaScript combined, I am posting this question here.
    No JQuery please.

    So say launch date is $launch_date = 'May/1/2013';

    What we want then is the code which would display to a person visiting this page the message:

    Launch Date: 31 Days - 23 Hours - 4 Min - 45 Seconds

    With the counter for Seconds, Minutes, etc. clicking down in real time toward the launch date.

    Thank you for your suggestions.

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    SitePoint Addict KJedi's Avatar
    Join Date
    Sep 2005
    Location
    Ukraine, Nikolaev
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you need real-time update, then you need Javascript. In your PHP page you should do something like this:
    Code HTML4Strict:
    <script type="text/javascript">
      var launchDate = new Date(<?php echo date('D, d M Y H:i:s e', $launchTimeInSeconds); ?>); //date should have format Wed, 09 Aug 1995 00:00:00 GMT
    </script>
    Make sure, that launchTime is in UTC (or GMT).
    Then you need a script that works with that date and current user's time and every second returns difference between the current time and the planned launch date in a form of object, something like this:
    Code JavaScript:
    function timeDiff(launchTime) {
        //some calculations
        return {days: 15, hours: 12, minutes:10, seconds:5};
    }
    Then you need one more function that updates the DOM. I'd use jQuery for it, but plan JS also works well:
    Code JavaScript:
    function updateElement(el, time) {
        var domEl = document.getElementById(el);
        var str = (time.days || 0) + 'days - ' + (time.hours || 0) + 'hours - ' + (time.minutes || 0) + 'minutes - ' + (time.seconds || 0) + 'seconds';
        domEl.innerHtml = str;
    }
    And in the main scrip file you do this:
    Code JavaScript:
    var timeout = setTimeout(function() {
    updateElement('timeSpan', timeDiff);
    }, 1000);
    That's it.

    I didn't test the actual functions, but this is correct approach and should work as long as you implement timeDiff function correctly. There you just need to use getTime() from current and launch date and divide by 1000 (to remove milliseconds), then by 24*3600 for days, remaining part by 3600 for hours, remaining by 60 for minutes and remaining part is seconds.
    This is straightforward code and I'm a bit lazy to write it

    Good luck!
    IQ RIA - Delivering smart web-applications
    High-quality PHP, Yii, Ruby on Rails, ExtJS, Backbone, EmberJS and jQuery consulting.
    Dashboards, HTML5 and CRM development.
    Request a quote now!

  3. #3
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I dont see how your code can work!

    for example how do I set the value of:
    $launchTimeInSeconds


    what is the point of this:

    timeDiff (launchTime) {
    //some calculations
    return {days: 15, hours: 12, minutes:10, seconds:5};
    }

    I mean what is
    //some calculations
    and where are values for return {days: 15, hours: 12, minutes:10, seconds:5};
    coming from?

    Thanks



    Quote Originally Posted by KJedi View Post
    If you need real-time update, then you need Javascript. In your PHP page you should do something like this:
    Code HTML4Strict:
    <script type="text/javascript">
      var launchDate = new Date(<?php echo date('D, d M Y H:i:s e', $launchTimeInSeconds); ?>); //date should have format Wed, 09 Aug 1995 00:00:00 GMT
    </script>
    Make sure, that launchTime is in UTC (or GMT).
    Then you need a script that works with that date and current user's time and every second returns difference between the current time and the planned launch date in a form of object, something like this:
    Code JavaScript:
    function timeDiff(launchTime) {
        //some calculations
        return {days: 15, hours: 12, minutes:10, seconds:5};
    }
    Then you need one more function that updates the DOM. I'd use jQuery for it, but plan JS also works well:
    Code JavaScript:
    function updateElement(el, time) {
        var domEl = document.getElementById(el);
        var str = (time.days || 0) + 'days - ' + (time.hours || 0) + 'hours - ' + (time.minutes || 0) + 'minutes - ' + (time.seconds || 0) + 'seconds';
        domEl.innerHtml = str;
    }
    And in the main scrip file you do this:
    Code JavaScript:
    var timeout = setTimeout(function() {
    updateElement('timeSpan', timeDiff);
    }, 1000);
    That's it.

    I didn't test the actual functions, but this is correct approach and should work as long as you implement timeDiff function correctly. There you just need to use getTime() from current and launch date and divide by 1000 (to remove milliseconds), then by 24*3600 for days, remaining part by 3600 for hours, remaining by 60 for minutes and remaining part is seconds.
    This is straightforward code and I'm a bit lazy to write it

    Good luck!

    Anoox search engine volunteer

    www.anoox.com

  4. #4
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Here is a quick and dirty jQuery based example but it can be converted to use PHP and regular Javascript if needed
    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
    
    
        <title>Site Base</title>
    
    
    </head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    
    
    <script type="text/javascript">
    var before="Camp Starts!"
    var current="Game on!"
    var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
    
    
    function countdown(yr,m,d){
    	theyear=yr;themonth=m;theday=d
    	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 todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
    	futurestring=montharray[m-1]+" "+d+", "+yr
    	dd=Date.parse(futurestring)-Date.parse(todaystring)
    	dday=Math.floor(dd/(60*60*1000*24)*1)
    	dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
    	dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
    	dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
    	
    	if(dday==0&&dhour==0&&dmin==0&&dsec==1){
    		document.forms.count.count2.value=current
    		return
    	} else
    	$('.timer').text("Training starts in  "+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds");
    	setTimeout("countdown(theyear,themonth,theday)",1000)
    }
    
    
    
    
    //enter the count down date using the format year/month/day
    		countdown(2013,08,19);
        
    
    
    </script>
    <body>
        <div class="timer"></div>
    </body>
    </html>
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    echo date('D, d M Y H:i:s e'$launchTimeInSeconds); 
    $launchTimeInSeconds is the date of your event, in seconds from Unix time stamp. (See php.net/time)

    You can convert a date to time stamp using strtotime


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
  •