0

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
6
Views
7 Years
Discussion Span
Last Post by nonshatter
0

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

0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.