/    Sign up×
Community /Pin to ProfileBookmark

countdown until

Copy linkTweet thisAlerts:
May 27.2003

Hello I was wondering if someone could help me out.

I am in need of a script that will countdown to a day that is specified in the script.

I would like it to be dynamic and update every second

dd:hh:mm:ss

Then when it reaches 0 I would like the clock to disappear and my message appears.

Any help would be appreciated.

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@NevermoreMay 27.2003 — Go to http://javascript.internet.com/clocks/digital-countdown.html

and get the countdown script from there.

Then find the line newtime = window.setTimeout("getTime();", 1000);

Just after that put

if(now==later{

show();

newtime.clearTimeout()}

Then, just before the HTML comments that make up the script tags, put the script to make it appear and disappear. I would write it for you, but I'm kind of busy, and I know that there are many people who aren't busy on this forum. If you haven't been helped when I come back on, I'll do it for you.
Copy linkTweet thisAlerts:
@QuasiboboMay 27.2003 — Take a look this:


<script language="JavaScript1.2">

/*

Dynamic countdown Script- © Dynamic Drive (www.dynamicdrive.com)

For full source code, 100's more DHTML scripts, and TOS,

visit http://www.dynamicdrive.com

*/


function setcountdown(theyear,themonth,theday,uren,minuten){

yr=theyear;mo=themonth;da=theday;

}

//////////CONFIGURE THE COUNTDOWN SCRIPT HERE//////////////////

//STEP 1: Configure the countdown-to date, in the format year, month, day:

setcountdown(2003,12,20)

//STEP 2: Change the two text below to reflect the occasion, and message to display on that occasion, respectively

var occasion="the occassion......"

var message_on_occasion="Hip hip hurray!"

//STEP 3: Configure the below 5 variables to set the width, height, background color, and text style of the countdown area

var countdownwidth='750px'

var countdownheight='20px'

var countdownbgcolor='black'

var opentags='<font face="Verdana" color="white" size="3">&nbsp;<b>'

var closetags='</b></font>'

var uren=12;

var minuten=30

//////////DO NOT EDIT PASS THIS LINE//////////////////

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

var crosscount=''

function start_countdown(){

if (document.layers)

document.countdownnsmain.visibility="show"

else if (document.all||document.getElementById)

crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie

countdown()

}

if (document.all||document.getElementById)

document.write('<span id="countdownie" style="width:'+countdownwidth+';height:'+countdownheight+'; background-color:'+countdownbgcolor+'"></span>')

window.onload=start_countdown


function countdown(){

var today=new Date()

var todayy=today.getYear()

if (todayy < 1000)

todayy+=1900

var todaym=today.getMonth()

var todayd=today.getDate()

var todayh=today.getHours()

var todaymin=today.getMinutes()

var todaysec=today.getSeconds()

var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec

futurestring=montharray[mo-1]+" "+da+", "+yr+" "+uren+":"+minuten

dd=Date.parse(futurestring)-Date.parse(todaystring)

dday=Math.floor(dd/(60*60*1000*24)*1)

dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)

dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)

dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)

//if on day of occasion

if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){

if (document.layers){

document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags)

document.countdownnsmain.document.countdownnssub.document.close()

}

else if (document.all||document.getElementById)

crosscount.innerHTML=opentags+message_on_occasion+closetags

return

}

//if passed day of occasion

else if (dday<=-1){

if (document.layers){

document.countdownnsmain.document.countdownnssub.document.write(opentags+"The occassion already happened.....! "+closetags)

document.countdownnsmain.document.countdownnssub.document.close()

}

else if (document.all||document.getElementById)

crosscount.innerHTML=opentags+"The occassion already happened.....! "+closetags

return

}

//else, if not yet

else{

if (document.layers){

document.countdownnsmain.document.countdownnssub.document.write(opentags+"Just "+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left 'till "+occasion+closetags)

document.countdownnsmain.document.countdownnssub.document.close()

}

else if (document.all||document.getElementById)

crosscount.innerHTML=opentags+"Just "+dday+ " days, "+dhour+" hours, "+dmin+" minuts, and "+dsec+" seconds left 'till "+occasion+closetags

}

setTimeout("countdown()",1000)

}

</script>

<ilayer id="countdownnsmain" width=&{countdownwidth}; height=&{countdownheight}; bgColor=&{countdownbgcolor}; visibility=hide><layer id="countdownnssub" width=&{countdownwidth}; height=&{countdownheight}; left=0 top=0></layer></ilayer>
Copy linkTweet thisAlerts:
@CharlesMay 27.2003 — [font=georgia]You might find this one a little bit easier to use.[/font]

[font=monospace]<script type="text/javascript">

<!--

Date.ONE_SECOND = 1000;

Date.ONE_MINUTE = Date.ONE_SECOND * 60;

Date.ONE_HOUR = Date.ONE_MINUTE * 60;

Date.ONE_DAY = Date.ONE_HOUR * 24;

Date.ONE_WEEK = Date.ONE_DAY * 7;

function TimeUntil (d) {this.time = d.getTime ? d.getTime() : Date.parse(d)}

TimeUntil.prototype.valueOf = function () {return this.time - new Date ().getTime()}

TimeUntil.prototype.toString = function () {

var t = Math.abs(this.valueOf());

var d = Math.floor (t / Date.ONE_DAY);

var h = Math.floor ((t % Date.ONE_DAY) / Date.ONE_HOUR);

var m = Math.floor ((t % Date.ONE_HOUR) / Date.ONE_MINUTE);

var s = Math.floor ((t % Date.ONE_MINUTE) / Date.ONE_SECOND);

return (this.valueOf () < 0 ? '-' : '') + [d, d == 1 ? 'day' : 'days', [h, m < 10 ? '0' + m : m, s < 10 ? '0' + s : s].join(':')].join(' ');

}

// The above part of the script can go in the document HEAD if you prefer

var time = new TimeUntil ('1 August 2003 10:00 CDT');

document.write('<p>Time until the 2003 <a href="http://hooverassoc.org/hooverball.htm">Hooverball</a> National Championships: <span id="time">',time , '</span></p>');

if (document.getElementById) setInterval ("document.getElementById('time').replaceChild(document.createTextNode (time), document.getElementById('time').firstChild)",0.2 * Date.ONE_SECOND);

// -->

</script> [/font]
Copy linkTweet thisAlerts:
@doobsterauthorMay 28.2003 — Thanks everyone. I really like the last one posted by Charles. But I am wondering if someone could help me alter so when it reaches 0 I could display a new message.
Copy linkTweet thisAlerts:
@CharlesMay 28.2003 — [font=monospace]if (document.getElementById) setInterval ("document.getElementById('time').replaceChild(document.createTextNode (time > 0 ? time : 'It's already started if it hasn't already ended.'), document.getElementById('time').firstChild)",0.2 * Date.ONE_SECOND);

[font=georgia][i]or[/i][/font]

document.write('<p id="time">Time left: ',time , '</p>');

if (document.getElementById) var interval = setInterval ("document.getElementById('time').replaceChild(document.createTextNode ('Time left: ' + time.toString()), document.getElementById('time').firstChild); if (time <= 0) {clearInterval(interval); document.getElementById('time').replaceChild(document.createTextNode ('The time has come.'), document.getElementById('time').firstChild)}",0.2 * Date.ONE_SECOND);[/font]
Copy linkTweet thisAlerts:
@CharlesMay 28.2003 — [font=georgia]Here's a better way to do that:[/font]

[font=monospace]<script type="text/javascript">

<!--

Date.ONE_SECOND = 1000;

Date.ONE_MINUTE = Date.ONE_SECOND * 60;

Date.ONE_HOUR = Date.ONE_MINUTE * 60;

Date.ONE_DAY = Date.ONE_HOUR * 24;

Date.ONE_WEEK = Date.ONE_DAY * 7;

function TimeUntil (d) {this.time = d.getTime ? d.getTime() : Date.parse(d)}

TimeUntil.prototype.valueOf = function () {return this.time - new Date ().getTime()}

TimeUntil.prototype.toString = function () {

var t = Math.abs(this.valueOf());

var d = Math.floor (t / Date.ONE_DAY);

var h = Math.floor ((t % Date.ONE_DAY) / Date.ONE_HOUR);

var m = Math.floor ((t % Date.ONE_HOUR) / Date.ONE_MINUTE);

var s = Math.floor ((t % Date.ONE_MINUTE) / Date.ONE_SECOND);

return (this.valueOf () < 0 ? '-' : '') + [d, d == 1 ? 'day' : 'days', [h, m < 10 ? '0' + m : m, s < 10 ? '0' + s : s].join(':')].join(' ');

}

// The above part of the script can go in the document HEAD if you prefer

var time = new TimeUntil ('1 August 2003 10:00 CDT');

time.toMyString = function () {return this.valueOf() > 0 ? 'Time left: ' + this.toString() : 'The time has come.'}

document.write('<p id="time">',time.toMyString() , '</p>');

if (document.getElementById) var int = setInterval ("document.getElementById('time').replaceChild(document.createTextNode (time.toMyString()), document.getElementById('time').firstChild); if (time <= 0) clearInterval(int)",0.2 * Date.ONE_SECOND);

// -->

</script>[/font]
Copy linkTweet thisAlerts:
@doobsterauthorMay 28.2003 — I am trying to add some more lines text and html code but am having weird problems.

[code=php]
time.toMyString = function () {return this.valueOf() > 0 ? 'Time left: ' + this.toString() + '<img src=something.jpg' : 'The time has come.'}
[/code]

When I add some html code after the this.toString it displays the html code as plain text and it also displays the html code properly.

I cannot figure out why.
Copy linkTweet thisAlerts:
@CharlesMay 28.2003 — [font=monospace]document.getElementById('time').replaceChild(document.[b]createTextNode[/b] (time.toMyString()), document.getElementById('time').firstChild)[/font]

[font=georgia]You're going to need to play with the DOM.[/font]
Copy linkTweet thisAlerts:
@CharlesMay 28.2003 — [font=georgia]Perhaps something like:[/font]

[font=monospace]var time = new TimeUntil ('1 August 2003 10:00 CDT');

time.toRunningNode = function () {

var link = document.createElement('a');

link.setAttribute('href', 'http://hooverassoc.org/hooverball.htm');

link.appendChild(document.createTextNode('HooverBall'));

var running = document.createElement('p');

running.appendChild(document.createTextNode('Time until '));

running.appendChild(link);

running.appendChild(document.createTextNode(' National Championships: ' + this.toString()));

return running;

}

time.toDoneNode = function () {

var done = document.createElement('p');

done.appendChild(document.createTextNode('The time has come.'));

return done;

}

if (document.getElementById) {

document.write('<div id="time">&nbsp;</div>');

var timeNode = document.getElementById('time');

var interval = setInterval("if (time > 0) {timeNode.replaceChild(time.toRunningNode(), timeNode.firstChild)} else {clearInterval(interval); timeNode.replaceChild(time.toDoneNode(), timeNode.firstChild)}", Date.ONE_SECOND);

}

[/font]
×

Success!

Help @doobster spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...