A cool count down timer sourcecode !

H

HeroinNO.4

Copy the code below and save in a .htm file, for example : 1.htm, then
run it in browser, you'll see a cool count down timer ! If it doesn't
work, you may open http://www.fillweb.com in IE and View->Source, and
the latest version of count down timer will show you !

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>Welcome to Fillweb home page</title>
<meta name="keywords" content="fillweb, form filler, fill forms
automatically, account logon login, single sign on, fill web forms,
fill online forms automatically, form filling software, ai web
automatic auto fill out forms fill in forms">
<script language="JavaScript">
<!--
var timerID;
var timerRunning = false;
var today = new Date();
var startday = new Date();
var secPerDay = 0;
var minPerDay = 0;
var hourPerDay = 0;
var secsLeft = 0;
var secsRound = 0;
var secsRemain = 0;
var minLeft = 0;
var minRound = 0;
var minRemain = 0;
var timeRemain = 0;
/* This function will stop the clock */
function stopclock()
{
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
/* This function will start the clock */
function startclock()
{
stopclock();
countdown();
}
function startclock_cn()
{
stopclock();
showtime_cn();
}
/* This function will display the count-up */
function countdown()
{
startday = new Date("November 01, 2006 00:00 GMT");
startday.setYear("2006");
today = new Date();
secsPerDay = 1000 ;
minPerDay = 60 * 1000 ;
hoursPerDay = 60 * 60 * 1000;
PerDay = 24 * 60 * 60 * 1000;
/* Seconds */
secsLeft = (startday.getTime() - today.getTime()) / minPerDay;
secsRound = Math.round(secsLeft);
secsRemain = secsLeft - secsRound;
secsRemain = (secsRemain < 0) ? secsRemain = 60 - ((secsRound -
secsLeft) * 60) : secsRemain = (secsLeft - secsRound) * 60;
secsRemain = Math.round(secsRemain);
/* Minutes */
minLeft = ((startday.getTime() - today.getTime()) /
hoursPerDay);
minRound = Math.round(minLeft);
minRemain = minLeft - minRound;
minRemain = (minRemain < 0) ? minRemain = 60 - ((minRound -
minLeft) * 60) : minRemain = ((minLeft - minRound) * 60);
minRemain = Math.round(minRemain - 0.495);
/* Hours */
hoursLeft = ((startday.getTime() - today.getTime()) / PerDay);
hoursRound = Math.round(hoursLeft);
hoursRemain = hoursLeft - hoursRound;
hoursRemain = (hoursRemain < 0) ? hoursRemain = 24 -
((hoursRound - hoursLeft) * 24) : hoursRemain = ((hoursLeft -
hoursRound) * 24);
hoursRemain = Math.round(hoursRemain - 0.5);
/* Days */
daysLeft = ((startday.getTime() - today.getTime()) / PerDay);
daysLeft = (daysLeft - 0.5);
daysRound = Math.round(daysLeft);
daysRemain = daysRound;
/* Time */
if (daysRemain == 1)
{
day_rem = " day, "
}
else
{
day_rem = " days, "
}
if (hoursRemain == 1)
{
hour_rem = " hour, "
}
else
{
hour_rem = " hours, "
}
if (minRemain == 1)
{
min_rem = " minute, "
}
else
{
min_rem = " minutes, "
}
if (secsRemain == 1 || secsRemain == 0)
{
sec_rem = " second"
}
else
{
sec_rem = " seconds"
}
timeRemain = "Fillweb is coming in " + daysRemain + day_rem +
hoursRemain + hour_rem + minRemain +
min_rem + secsRemain + sec_rem;
document.counter.face.value = timeRemain;
timerID = setTimeout("countdown()",1000);
timerRunning = true;
}
//-->
</script>
</head>
<body onLoad="startclock()" bgcolor="#000000">
<div align="center">
<table border="0" width="700" height="333" cellspacing="2">
<tr>
<td background="images/milkyway.jpg"></td>
</tr>
<tr>
<td align="center" height="18" valign="bottom">
<form name="counter" style="position: relative">
<input type="text" name="face" size="100" value="A browser
supporting JavaScript 1.1+ is needed." style="border:1px solid
#000000; background-color:#000000; font-size:9pt; color:#FFFFFF;
text-align:center; position:relative; ">
</form>
</td>
</tr>
</table>
</div>
<script src="http://www.google-analytics.com/urchin.js"
type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-859503-1";
urchinTracker();
</script>
</body>
</html>
 
R

RobG

Copy the code below and save in a .htm file, for example : 1.htm, then
run it in browser, you'll see a cool count down timer !
Click to expand...

Cool? It's verbose and pollutes the global space unnecessarily with 18
global variables where 1 will suffice. You'll find stuff on
calculating date differences here:

<URL: http://www.merlyn.demon.co.uk/js-date1.htm#diff >

Here's another version that doesn't make any allowance for summer time,
but maybe it's not needed:


<title>Simple Countdown</title>
<script type="text/javascript">

var diffClock = (function()
{
// Private variables
var startDate;
var clockEl;
var timerRef;

// Private methods
function addS(n){
return (n==1)? '':'s';
}

function addZ(n){
return (n < 10)? '0'+n : ''+n;
}

function diffDays(d1, d2){
var days = d2-d1; // Difference in milliseconds

if (days < 0){
return null;
}
var ms = days % 1000; // remainder ms
days = (days - ms) / 1000;
var secs = days % 60; // remainder seconds
days = (days - secs) / 60;
var mins = days % 60; // remainder minutes
days = (days - mins) / 60;
var hrs = days % 24; // remainder hours
days = (days - hrs) / 24; // days is now whole days
return [days, hrs, mins, secs, ms];
}

// Public methods
return {
// Start clock
start : function(el, d)
{
this.stop();
if (typeof el != 'object') return;
clockEl = el;
startDate = d;
this.run();
},

// Run the clock
run : function(){
var diff = diffDays(new Date(), startDate);
if (diff != null){
clockEl.innerHTML = 'Diff: '
+ diff[0] + ' day' + addS(diff[0]) + ', '
+ diff[1] + ' hour' + addS(diff[1]) + ', '
+ diff[2] + ' minute' + addS(diff[2]) + ' and '
+ addZ(diff[3]) + ' second' + addS(diff[3]) + '.';

// Schedule next update just after next full second
var runIn = 1050 - (new Date().getTime() % 1000);
timerRef = setTimeout('diffClock.run();', runIn);
} else {
this.stop();
}
},

// Stop the clock
stop : function(){
if (timerRef && clearTimeout){
clearTimeout(timerRef);
timerRef = null;
}
}
}
})();

window.onload = function(){
diffClock.start(document.getElementById('clock'),
new Date('2006/11/29 17:05:13'));
}

</script>
<div>Days until 2006/11/29 17:05:13
<div id="clock"></div>

<button id="button" onclick="diffClock.stop();">Stop</button>
 
R

Randy Webb

(e-mail address removed) said the following on 10/29/2006 11:33 PM:
Copy the code below and save in a .htm file, for example : 1.htm, then
run it in browser, you'll see a cool count down timer ! If it doesn't
work, you may open http://www.fillweb.com in IE and View->Source, and
the latest version of count down timer will show you !
Click to expand...

Looks like an overly bloated count down timer. You may want to look into
padding your numbers though, when it goes from a single digit to double
digits (or vice versa) everything jumps because of the difference in
string length.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Cool count down timer sourcecode bug fixed ! 1
count down timer source code updated to 06/11/27 7
Latest version count down timer source code released ! 2
Full featured count down timer source code 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
After timer submit form 2
How to have two html audio players on one page? 0
How to convert display to mins:secs instead of secs in a timer? 2

Members online

No members online now.
Total: 31 (members: 1, guests: 30)
Robots: 216

Forum statistics

Threads
473,764
Messages
2,569,567
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top