Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > A cool count down timer sourcecode !

Reply
Thread Tools

A cool count down timer sourcecode !

 
 
HeroinNO.4@gmail.com
Guest
Posts: n/a
 
      10-30-2006
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>

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      10-30-2006

http://www.velocityreviews.com/forums/(E-Mail Removed) 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

 
Reply With Quote
 
 
 
 
Randy Webb
Guest
Posts: n/a
 
      10-31-2006
(E-Mail 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 !


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/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
count down timer source code updated to 06/11/27 HeroinNO.4@gmail.com Javascript 7 11-27-2006 08:56 PM
Latest version count down timer source code released ! HeroinNO.4@gmail.com Javascript 2 11-17-2006 11:15 PM
Full featured count down timer source code HeroinNO.4@gmail.com Javascript 1 11-11-2006 08:56 AM
Cool count down timer sourcecode bug fixed ! HeroinNO.4@gmail.com Javascript 1 10-31-2006 07:27 AM
Cool Applet Cool Applet http://24.60.235.213/Grid/ Alisher Fatykhov Java 1 08-06-2003 04:32 AM



Advertisments