This article describes the implementation of JS Web page countdown digital clock effect. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>javascript implementation of the countdown clock </title>
<style>
body,div{margin:0;padding:0;}
Body{color: #fff; font:16px/1.5 \5fae\8f6f\96c5\9ed1;}
#countdown {width:300px;text-align:center;background: #1a1a1a; margin:10px auto;padding:20px 0;}
Input{border:0;width:283px;height:50px;cursor:pointer;margin-top:20px;background:url (http://www.jb51.net/jscss /demoimg/201210/btn-1.png) No-repeat;}
Input.cancel{background-position:0 -50px;}
Span{color: #000; Width:80px;line-height:2;background: #fbfbfb; border:2px solid #b4b4b4; margin:0 10px;padding:0 10px;}
</style>
<script>
Window.onload = function ()
{
var ocountdown = document.getElementById ("Countdown");
var ainput = ocountdown.getelementsbytagname ("input") [0];
var timer = null;
Ainput.onclick = function ()
{
This.classname = ""? (Timer = setinterval (updatetime, 1000), UpdateTime ()): (Clearinterval (timer));
This.classname = This.classname = = "? "Cancel": ';
};
function Format (a)
{
Return a.tostring (). Replace (/^ (\d) $/, ' 0$1 ')
}
function UpdateTime ()
{
var Aspan = Ocountdown.getelementsbytagname ("span");
var oremain = aspan[0].innerhtml.replace (/^0/, ') * + parseint (aspan[1].innerhtml.replace (/^0/, '));
if (oremain <= 0)
{
Clearinterval (timer);
Return
}
oremain--;
aspan[0].innerhtml = Format (parseint (OREMAIN/60));
Oremain%= 60;
aspan[1].innerhtml = Format (parseint (Oremain));
}
}
</script>
<body>
<div id= "Countdown" >
<span>01</span> minutes <span>40</span> sec
<input type= "button" value= ""/>
</div> Cloud-dwelling community www.jb51.net code effects
</body>
I hope this article will help you with your JavaScript programming.