Did not expect a small timer incredibly will card Shell, Var seconds=50;
function Clock () {
Seconds--;//=seconds;
SetText (document.getElementById (' Count-down '), seconds);
if (seconds>0) setTimeout (clock,1000);//alert (seconds);
}
This is a very simple function, using settimeout write inside the clock function and call clock to implement recursive loop, so as to achieve the function of the timer, get div content (its ID is count-down), And the div is re-assigned according to the change of seconds, we can observe the change of time on the screen, but there is a problem .
At first I was using document.getElementById (' Count-down '). Innertext=seconds; The result is that the time on the screen is not changed and the desired effect is not achieved, so where does the problem arise, I alert you document.getElementById (' Count-down '). Innertext==null, the results found that actually output true, you know, my div content at the beginning of the value of the assignment is 50 ah.
Well, there is a mistake, this morning Baidu a bit innertext usage, the results found the problem, yesterday I test the environment is Firefox, just innertext in Firefox browser is not supported, it uses textcontent to replace InnerText. So, I put document.getElementById (' Count-down '). Innertext=seconds, and replaced it with SetText (the document.getElementById (' Count-down '), seconds);
SetText (element,content) is a function of its own definition to achieve the results of a compatible Firefox browser.
function SetText (element,content)
{
if (Element.innertext)
Element.innertext=content;
Else
Element.textcontent=content;
}
Well, the little timer, of course, is here if you use innerHTML is not a problem, because innerHTML is to remove the outermost HTML tags and keep the internal HTML tags, and at this time our div inside the wood has what HTML tags OH.
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Small countdown timer: innertext Browser compatibility issues