Member Avatar for nonshatter

Hey guys,

I am in need of a live real-time clock to count down to zero depending on the length of days specified in a database (Like an auction count-down timer).
For example, I can retrieve the length of time specified in the database, somehow put that value into the clock and then let the timer count down to zero. Is there a particular scripting language I should be using for this E.g. Javascript/AJAX etc? Does anyone know the best way to achieve this sort of functionality?

Your advice is much appreciated. Many thanks,
nonshatter

  • 2 Contributors
  • 4 Replies
  • 705 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by nonshatter
Member Avatar for fxm

scripting language

Google for "javascript countdown".

Member Avatar for nonshatter

Thanks,
I know there are an abundance of javascript countdown clocks available on the web. I think I'm able to devise one, but my problem is that all my users must be syncronised to the same server (mysql server if possible?). Would this be achievable using PHP Javascript?
Thanks

Member Avatar for nonshatter

Thanks for your response fxm.

Have you used this script before? I have never used JQuery - How exactly does this all work? I'm a little bit confused... If I have my html page with the <div> sections, along with the jQuery script, how could I 'plug-in' the 'time remaining' values from my database and let the user synchronise with my server time? Also, what is JSON data? Are you able to elaborate a little more on this?
Thanks

<html>
<head>
</head>
<body>
<div id="imclock"></div>
<div id="time_href" style="display:none">http://url.to.time.inJSON</div>
</body>
</html>
<script type="text/javascript">
$(function(){
  $('#imclock').imclock();
});


(function($) {

   $.fn.imclock = function(options) {
     var settings = jQuery.extend({
                                    name: "defaultName",
                                    size: 5
                                  }, options);
     var version = '1.4.0';
     return $.fn.imclock.start($(this), null);
   };

   // TODO 2: sepparate time setting interval and clock starting
   $.fn.imclock.start = function(element, time) {
     if (time == null)
     {
       var time = $.fn.imclock.getServerTime(element);
     }
     else
     {
       time.setSeconds(time.getSeconds() + 1);
     }
     var hours = time.getHours();
     var minutes = time.getMinutes();
     var seconds = time.getSeconds();

     if (minutes<10) {
       minutes = '0' + minutes;
     }
     if (seconds<10) {
       seconds = '0' + seconds;
     }

     element.html(hours+ ":" + minutes + ":" + seconds);
     element.timerID = setTimeout(function(){$.fn.imclock.start(element, time);},1000);
   };

   // This is the function that gets the actual time from the server
   // time is expected to be returned as JSON data in field named "time"
   // For example the request could look like this:
   // {
   //  some_data: "lorem",
   //  time : 2010-12-12T12:23
   // }
   $.fn.imclock.getServerTime = function(element) {
     var time = null;
     if ($("#time_href").length) {
       var url = $("#time_href")[0].innerHTML;
       $.getJSON(url, function(data) {
                   if (data){
                   time = new Date(Date.parse(data.time));                     
                   }
                 });
     }
     if (time == null) {
       time = new Date();
     }
     return time;
   };

 })(jQuery);
</script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.