PDA

View Full Version : Javascript Timer Help



l0rd
01-25-2009, 05:11 AM
Hello. I am a script Newbie. I want to place a timer on a page on my website. I already have a javascipt code that I want to use. But I'm afraid thats all I have at this point.

The script is:

var time
var output

function Init(){
time = 1;
StartTimer()
}

function convertOutput(){
var hours = 0
var mins = 0
var secs = time

while(secs >= 60){
secs -= 60;
mins += 1;
}

if(secs < 10){
secs = "0" + secs;
}

while(mins >= 60){
mins -= 60;
hours += 1;
}

if(mins < 10){
mins = "0" + mins;
}

output = hours + ":" + mins + ":" + secs;
}

function StartTimer(){
time += 1;
convertOutput();
document.getElementById("time").innerHTML = output;
self.setTimeout("StartTimer()", 1000);
}

I need to put this on a webpage on my website.

Help will be greatly appreciated, and thanks in advance.

Twey
01-25-2009, 05:28 AM
What sort of a timer? We'll need a little more than this.

l0rd
01-25-2009, 06:21 AM
Its an autostart timer that tells you how long you've been looking at a webpage (no buttons or user controls)

Twey
01-25-2009, 10:00 AM
Well, that's fairly easy:
<span id="timer">&nbsp;</span>

<script type="text/javascript">
(function(start) {
function map(f, a) {
for (var i = a.length - 1, r = []; i >= 0; --i)
r[i] = f(a[i], i);

return r;
}

function pad(s, w, c) {
return (new Array(w + 1 - s.toString().length)).join(c || "0") + s;
}

function timerTick() {
var now = new Date(new Date() - start);

document.getElementById("timer").firstChild.nodeValue
= map(function(n) { return pad(n, 2); },
[now.getUTCHours(),
now.getUTCMinutes(),
now.getUTCSeconds()]).join(":");
}

setInterval(timerTick, 1000);
})(new Date());
</script>

l0rd
01-25-2009, 10:41 AM
hmm, Do I just paste that into the page that I want the timer to be in? Because I just did and no timer.

Twey
01-25-2009, 11:17 AM
Should do, yes. If it didn't work, show the page so I can debug it. :)

l0rd
01-25-2009, 06:18 PM
the site is Forlol.com

Twey
01-26-2009, 11:03 AM
There is no <span id="timer"> on that page. You haven't placed the code properly.

l0rd
01-30-2009, 12:04 AM
what code do I place and where do i place it

Twey
01-30-2009, 01:52 PM
Exactly the code I gave you, where you want the timer.

boogyman
01-30-2009, 05:14 PM
map(function(n) { return pad(n, 2); },

In your pad function declaration, you have three arguments, however the only place you call the function is above. Can you please explain the meaning of the third argument c, and how it get assigned a value ever.

Twey
01-30-2009, 11:41 PM
The third argument is the character with which to pad, defaulting to '0'. I didn't need that argument for the code to work, but it's a stock function which I typed from memory, and it never hurts to be more flexible. It will be assigned a value if a third argument is passed at calltime.

boogyman
02-01-2009, 03:32 PM
Just went to test it out and it doesnt work. Tosses an error
invalid array length
on

return s + (new Array(w + 1 - s.length)).join(c || "0");

Twey
02-01-2009, 04:27 PM
Yep, should be length() not length. Too much Java... or something :o Edited.

boogyman
02-02-2009, 02:05 AM
you were correct the first time... the length method doesn't use parenthesis

Twey
02-02-2009, 03:58 AM
Yeah, you're right, fixed again.

boogyman
02-03-2009, 01:11 PM
now that it works. what ended up being the problem?

Twey
02-03-2009, 08:08 PM
I goofed up pad(): it needs to call toString() on the provided values, and it should also prepend the original value rather than append it.