Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    May 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Countdown Clock?

    I figured if there was one it would be a Javascript but does anyone know of a countdown clock that almost looks like a counter/turnstile number row? Like this sorta:



    I've been looking for one where I have the numbers look just like that and 'push' upward as the times (days, minutes, seconds) go on. Hopefully someone knows of a script >< Thanks alot!!!

  • #2
    Regular Coder
    Join Date
    Jan 2003
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm. Ive never seen an animated script/countdown clock. At least not with them scrolling down like that and curling back in, to look like its a roll. What you could use for this though, if you would like that look of it curling down, and curling up at the edges, is flash. Im not that great with flash though, so I cannot direct you to a script to do this, but if you play around with it, you should be able to get it in flash.

  • #3
    New to the CF scene
    Join Date
    May 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Heh thanks. I know only basic flash but maybe I could find a flash tutorial on that too. Ill see what anyone else has to say. Thanks though!

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's doable in DHTML ... watch this space ...
    Last edited by brothercake; 05-29-2004 at 12:35 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Right here's the animation mechanism (attached, and demo at http://www.brothercake.com/Ref/barrelclock/clock.html)

    The links show you how to move the digits, so I'll leave you to incorporate the timekeeping (don't forget to update the images' ALT text)
    Attached Files Attached Files
    Last edited by brothercake; 05-31-2004 at 12:35 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #6
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    That's Neat Brothercake!

    Seems to keep scrolling on double click though, actually triple or quadruple. No way to stop it except refreshing. Supposed to do that? Or is it just unimportant for the example?

    Basscyst
    Last edited by Basscyst; 05-29-2004 at 02:38 AM.
    Helping to build a bigger box. - Adam Matthews

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's a mistake - if you invoke a timer when that unit's timer is still running, it invokes a second instance, which isn't controlled, and so runs forever.

    In theory that should never be a problem - the loop takes less than a second, so a clock won't invoke it more than once a second.

    But it should be fixed anyway ... the solution is a condition in the animateDigit function:
    Code:
    //initiate animation for a single digit
    function animateDigit(digID)
    {
    		//if this timer is not already going
    		if(tc.timers[digID] == null)
    		{
    			//initiate movement loop
    			tc.timers[digID] = setInterval('moveDigit(' + digID + ')',tc.aniSpeed);
    		}
    };
    Here are the updated files.
    Attached Files Attached Files
    Last edited by brothercake; 05-29-2004 at 05:29 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #8
    New to the CF scene
    Join Date
    May 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    W00t THanks so much!!! So I'll try to put the timer into it if i can... If not I guess thats what this place is for lol. Thanks again!

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You shouldn't have any trouble - you have arrays for the timer controls, and there are six items in each array, one for each of the images; things like this:
    Code:
    tc.counters = [0,0,0,0,0,0];
    So if you have an array which maintains the elapsed time in the same form - [h,h,m,m,s,s] - you can simply add another timer which loops every second and animates whichever digits need to be increased.
    Last edited by brothercake; 05-29-2004 at 05:36 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #10
    New to the CF scene
    Join Date
    May 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Heh sorry I'm such a n00b -_- I'm only a highschool student. Havent learned much in scripting more graphic design. Could you maybe explain that a little be easier? sigh sorry for being a pest.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've been playing with this some more ... I added the ability to snap or animate the clock to a particular value, support for different numerical bases, and a stopwatch.

    Actually it was easier than I said - I just added logic to the digit animations so they increment their neighbour if they get above their numeric base, or decrement it if they get below 0, so then all it took to add the stopwatch was a one second timer that changes the final digit
    Attached Files Attached Files
    Last edited by brothercake; 05-29-2004 at 01:45 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #12
    New to the CF scene
    Join Date
    May 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow thanks so much! Youre a genius. heh. I'm gonna try to find out how to set it to count down til the last day of school. And then i guess I'll change it to the last day of summer. lol

  • #13
    New Coder
    Join Date
    Aug 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey guys,

    I was wondering if you could turn this into a countdown clock to a certain time and date?

  • #14
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Here's another take on it (just a quick sketch) - that requires no images:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    * {margin:0;padding:0;font: 14px/130% Tahoma, Geneva, sans-serif}
    p {margin:12px 0 6px 0}
    body {margin:20px}
    </style>
    <title>Clock</title>
    <script type="text/javascript">
    
    // Lib
    var barrelClock = (function(){
      
      var niceTime = function(s){
        var h = Math.floor(s/3600);
        var m = Math.floor(s/60 - h*60);
        var s = s%60;
        h < 10 && (h = '0' + h);
        m < 10 && (m = '0' + m);
        s < 10 && (s = '0' + s);
        return h + ':' + m + ':' + s;
      };
      
      var asDivs = function(text,nextText,down,parentEl,style){
        down = !down;
        style = style || {};
        var i, divs, html = '', t = text.split(''), nt = nextText.split(''), ani = [];
        for(i = 0; i < t.length;i++){
          html += '<div>'
          + (down && t[i] != nt[i] ? '<span style="display:block">' + nt[i] + '</span>' : '')
          + '<span style="display:block">' + t[i] + '</span>'
          + (!down && t[i] != nt[i] ? '<span style="display:block">' + nt[i] + '</span>' : '')
          + '</div>';
          ani.push(t[i] != nt[i]);
        };
        parentEl.innerHTML = html;
        divs = parentEl.getElementsByTagName('div');
        for(i = 0; i < t.length;i++){
          with(divs[i].style){
            padding = style.padding + 'px';
            width = style.width + 'px';
            left = (2 + style.width * i) + 'px';
            top = 0;
            textAlign: 'center';
            position = i ? 'absolute' : 'relative';
          }
        };
        var co = 0, sp;
        var aniFunc = function(){
          for(var i = 0; i < divs.length; i++){
            var diff, sp = divs[i].getElementsByTagName('span');
            if(sp.length < 2){continue};
            diff = sp[1].offsetTop - sp[0].offsetTop;
            divs[i].style.top = (down ? -diff : 0) + (down ? 1 : - 1) * Math.round((diff/20) * co) + 'px';
            co >= 20 && (sp[down ? 1: 0].style.visibility = 'hidden');
          };
          co++;
          co > 20 && clearInterval(ani)
        };
        aniFunc();
        var ani = setInterval(aniFunc,25);
      };
      
      return function(settings){
        var s = settings, el = s.el, now = new Date();
        var start = s.start.split(':');
        if(start[0] == 'now'){
          start[0] = now.getHours();
          start[1] = now.getMinutes();
          start[2] = now.getSeconds();
        };
        start = start[0] * 3600 + start[1] * 60 + start[2]/1;
        el = typeof el == 'string' ? document.getElementById(el) : el;
        s.width = s.width || 180
        with (el.style){
          margin = 0;
          padding = 0;
          border = 0;
          background = s.background || '#222';
          color = s.color || '#eee';
          font = s.font || '20px Tahoma';
          width = s.width + 'px';
          position = 'relative';
        };
        var startTime = new Date().getTime();
        var lastDiff;
        var mainInterval = setInterval (function(){
          var diff = Math.floor((new Date().getTime() - startTime)/1000);
          if(lastDiff == diff){return};
          var t1 = s.type =='down' ? start - diff : start  + diff;
          var t2 = s.type == 'down' ? start - diff - 1 : start + diff +1;
          asDivs(niceTime(t1),niceTime(t2),s.type == 'down',el,{width:Math.round((s.width-4)/8),padding:4});
          if(!lastDiff){
            el.style.height = el.offsetHeight;
            el.style.overflow = 'hidden';
          };
          lastDiff = diff;
          if(t2 >= 3600 * 12 && s.type == 'clock12'){startTime += 3600*12*1000};
          if(t2 >= 3600 * 24 && (s.type == 'clock' || s.type == 'clock24')){startTime += 3600*24*1000};
          t1 <= 1 && s.type == 'down' && clearInterval(mainInterval);
        },300);
      }
      
    })();
    
    // Initiate examples
    onload = function(){
      barrelClock({el:'myClock2',down:true,type:'down',start:'01:00:00'});
      setTimeout(function(){barrelClock({el:'myClock1',type:'up',start:'00:00:00'})},250);
      setTimeout(function(){barrelClock({el:'myClock3',type:'clock',start:'now'})},500);
    };
    </script>
    </head>
    <body>
    <p>Count up:</p>
    <div id="myClock1"></div>
    
    <p>Count down:</p>
    <div id="myClock2"></div>
    
    <p>Clock:</p>
    <div id="myClock3"></div>
    </body>
    </html>
    Last edited by ironboy; 10-05-2011 at 11:28 PM.


  •  

    Posting Permissions

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