By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,853 Members | 1,027 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,853 IT Pros & Developers. It's quick & easy.

A cool count down timer sourcecode !

P: n/a
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>

Oct 30 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
He********@gmail.com 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 !
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.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Oct 30 '06 #2

P: n/a

He********@gmail.com wrote:
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 !
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>
--
Rob

Oct 30 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.