/    Sign up×
Community /Pin to ProfileBookmark

Countdown Explaination

Hello everyone. I have this countdown script that I got from phpnovice…thanks phpnovice. I’ve been using it for a while but for some reason I never really looked at it to see how it works. Can someone simply take me through the code to explain how it works and what makes it work, just in case I would want to make something similar in the future.

[code]var count = 300

function countdown() {

if(count >= 0){
var obj = document.getElementById(“countdown”);
obj.replaceChild(document.createTextNode(count.toMinutesAndSeconds()), obj.firstChild);
count–;
window.setTimeout(“countdown()”,1000);
}

}

Number.prototype.toMinutesAndSeconds = function() {

var nn, curTime = new Date(this * 1000);
return nn=curTime.getMinutes() + “:” +
(((nn=curTime.getSeconds())<10)?”0″+nn:nn);

}[/code]

Thanks in advance.

lonogod

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@konithomimoDec 23.2005 — <i>
</i>//start # to count from
var count = 300

//create function
function countdown() {

//if your count is greater than zero then do what is inside the brackets
if(count &gt;= 0)
{
//assign the variable obj to "countdown" . . . a text field on your page
var obj = document.getElementById("countdown");
//replace the text from your display with the returned value from toMinutesAndSeconds()
obj.replaceChild(document.createTextNode(count.toMinutesAndSeconds()), obj.firstChild);
//subtract one from your count
count--;
//run countdown after a 1 second pause
window.setTimeout("countdown()",1000);
}

}

//create the function toMinutesAndSeconds
Number.prototype.toMinutesAndSeconds = function() {
//create your variables . . . one being a date object
var nn, curTime = new Date(this * 1000);
//get the minutes from the date object, as well as the seconds, and return them in a string of format 00:00:00
return nn=curTime.getMinutes() + ":" +
(((nn=curTime.getSeconds())&lt;10)?"0"+nn:nn);

}
Copy linkTweet thisAlerts:
@lonogodauthorDec 23.2005 — Thank you konithomimo. I have 3 questions though.

  • 1. Are replaceChild, createTextNode, and firstChild built in JavaScript attributes?


  • 2. What does the "?" symbol in this code do? (((nn=curTime.getSeconds())<10)?"0"+nn:nn);


  • 3. Why is the variable "count" on the outside of the function?


  • Thanks again.

    lonogod
    Copy linkTweet thisAlerts:
    @felgallDec 23.2005 — 
  • 1. replaceChild, createTextNode and firstChild are part of the Javascript -> DOM interface defined by the DOM standards. They are supported by modern browsers but earlier ones (mostly no longer used) may not support them.


  • 2. [b]a?b:c[/b] is a shorthand way of saying [b]if (a) b; else c;[/b]


  • 3. Count is defined outside of the function because otherwise it would be redefined as a new field every second and would always contain 300 resulting in the script constantly displaying 299.
  • Copy linkTweet thisAlerts:
    @lonogodauthorDec 23.2005 — Thank you felgall. I was really wondering about question 1 and 2. I appreciate you solving those for me. Thanks again.

    lonogod
    ×

    Success!

    Help @lonogod 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.28,
    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,
    )...