counting seconds [Archive] - Dynamic Drive Forums

hantz

11-11-2007, 02:56 AM

i am searching some script that counting seconds...
for example
1..2..3..4..5..6..7..8..9..10!
stopes after 10 and do nothing....

has someone cross over script like this?

Twey

11-11-2007, 03:51 AM

Erm...
<script type="text/javascript">
function count(el, start, stop) {
el = el.firstChild || el.appendChild(document.createTextNode(""));
start = start || 0;
stop = stop || 10;

var c = start,
inc = function() {
if (c > stop) {
clearInterval(t);
el = null;
} else
el.nodeValue = c++;
},
t = setInterval(inc, 1000);
}
</script>
</head>
<body>
<p onclick="count(this);">Click here to begin counting.</p>

hantz

11-11-2007, 08:59 PM

i already have a script:

<body onLoad="setTimeout('check_Redirect()', 30000);">

<script type="text/javascript">
function check_Redirect(){
document.getElementById("alertmsg").innerHTML = "<p style='background:#000000;color:#ffffff;'>You have 10 seconds left!"</p>;
}

<div id="alertmsg" name="alertmsg"></div>
</script>
i need to add this counting function inside of this script in order that when the timeout will shoot, that the seconds will strat running.

i tried to fit this script to my script but it not working...just doing nothing...can you show me how to combine them ?

Twey

11-11-2007, 10:18 PM

hantz

11-12-2007, 07:02 AM

twey, i need to use

<body onLoad="setTimeout('check_Redirect()', 30000);">

and the counting function got to be part of this script

how can i do this?

hantz

11-12-2007, 07:03 AM

please look at my script and tell me where i got wrong...

<body onLoad="setTimeout('if(c==null) c=setInterval('startClock()',1000);', 50000);">
<script type="text/javascript">
var c=null;
var ctr=10;
function startClock(theLink){
var o=document.getElementById('sec');
var s=ctr<10?" second":" seconds";
o.innerHTML="<p style='background:#000000;color:#ffffff;'>You have "+(ctr) +s +" left</p>";
ctr--;
if(ctr<0){clearInterval(c); return false;}

}

</script>
</head>
<body>
<div id="sec"></div>

if i call the script like this;
<input type="button" value="Start" onClick="if(c==null) c=setInterval('startClock()',1000);">
it is working
but i need it to be called from the timeout as i tried above...

Twey

11-12-2007, 07:23 AM

The snippet of code you provided uses a couple of bad practices, namely inline event handlers and passing strings to setTimeout(). Additionally, camel-casing "onload" breaks compatibility with XHTML for no reason. I suggest dropping it in favour of my script-assigned event handler. Your attempt also uses inline style and innerHTML, again signs of bad coding: inline style causes unnecessary duplication and mitigates a lot of the benefits of using CSS in the first place, and innerHTML is non-standard and will not work in XHTML pages, unnecessarily reducing reliability and portability.

hantz

11-12-2007, 08:08 AM

then how we use your code inside the check_Redirect()
that will be called with

<body onLoad="setTimeout('check_Redirect()', 30000);">
?

Twey

11-12-2007, 08:19 AM

Don't call it like that. It's bad. It does the equivalent already here:
onload = function() {
setTimeout(function() { count(document.getElementById("timer")); }, 30000);
};

hantz

11-12-2007, 09:19 AM

Twey

11-12-2007, 10:12 AM

<div id="timer"></div>
i am using "div"
i want that it will apear on screen only when the timeout over...
+i want that there will be a black background=#000000 and white font #ffffff
how i can add those things?Read post #4.
if this script can be run from <body onLoad="setTimeout('????()', 30000);">
i will be happy to know howRead post #9.

hantz

11-12-2007, 10:19 AM

i am using "div"
i want that it will apear on screen only when the timeout over...
+i want that there will be a black background=#000000 and white font #ffffff
how i can add those things?

if you put the "style" and all the text "your page will be gone in ..seconds"
in side the div as you told me to di, it will apear all the time on the page...

i need that the "your page will be gone in ..seconds" + stoper
will apear only timeout over.

i think that we have to use innerHTML?

hantz

11-12-2007, 10:23 AM

if you will got
<p class="timer">You have <span id="timer">plenty of time</span> left.</p>
you will always
You have plenty of time left.

i need plane page while the timeout is ok.
but when timeout is over the alert text("you have...") + counting
have to apear in the middle of the page with the div position=absolute...

Twey

11-12-2007, 05:29 PM

There was no need to repeat the whole message.

You mean you want the whole element to only be shown when the timeout is up? Well, that's easy enough:
<style type="text/css">
.timer {
color: white;
background-color: black;
}
</style>
<script type="text/javascript">
function count(el, start, stop) {
el.parentNode.style.display = "";
el = el.firstChild || el.appendChild(document.createTextNode(""));
start = start || 0;
stop = stop || 10;

var c = start,
inc = function() {
if (c > stop) {
clearInterval(t);
el = null;
} else
el.nodeValue = c++;
},
t = setInterval(inc, 1000);
}

onload = function() {
setTimeout(function() { count(document.getElementById("timer")); }, 30000);
};
</script>
</head>
<body>
<p class="timer" style="display: none;">You have <span id="timer">lots of</span> seconds left.</p>