...

View Full Version : Countdown Clock?



Apple D00d
05-28-2004, 10:40 PM
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:

http://digital-potato.net/josh/clock.jpg

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!!!

l3vi
05-28-2004, 10:44 PM
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.

Apple D00d
05-28-2004, 10:48 PM
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!

brothercake
05-28-2004, 11:06 PM
That's doable in DHTML ... watch this space ...

brothercake
05-29-2004, 01:06 AM
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) :)

Basscyst
05-29-2004, 01:30 AM
That's Neat Brothercake! :thumbsup:

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

brothercake
05-29-2004, 04:21 AM
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:


//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.

Apple D00d
05-29-2004, 04:24 AM
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!

brothercake
05-29-2004, 04:33 AM
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:


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.

Apple D00d
05-29-2004, 04:48 AM
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.

brothercake
05-29-2004, 12:32 PM
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 :)

Apple D00d
05-29-2004, 03:03 PM
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 :thumbsup:

Lpmraven
10-04-2011, 07:03 PM
Hey guys,

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

ironboy
10-05-2011, 10:13 PM
Here's another take on it (just a quick sketch) - that requires no images:

<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum