javascirpt倒计时

代码1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css"></style>
    <script type="text/javascript">
        window.onload = function() {

            function countDown(){
                var oSpan = document.getElementsByTagName("span");
                var m = oSpan[0].innerHTML;
                var n = oSpan[1].innerHTML;
                var timer = setInterval(function(){
                    n--;
                    if(n % 60 == 0) {
                        m--;
                        n = m == 0 ? 0 : 60;
                        oSpan[1].innerHTML = n;
                    } 
                    if(m == 0) {
                        clearTimeout(timer);
                    }

                    if(m >=0 && m <10) {
                        oSpan[0].innerHTML = "0" + m;
                    } else {
                        oSpan[0].innerHTML = m;
                    }

                    if (oSpan[1].innerHTML == 60) {
                        oSpan[1].innerHTML = "0" + 0;
                    } else if (n>=10 && n <=59) {
                        oSpan[1].innerHTML = n;
                    } else if (n>=0 && n<=9) {
                        oSpan[1].innerHTML = "0" + n;
                    }
                }, 20);
            };  
            countDown();
        }
    </script>
</head>
<body>
    <span>1000</span>:<span>11</span>
</body>
</html>

 

代码2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css"></style>
    <script type="text/javascript">
        window.onload = function() {

            function countDown(){
                var oSpan = document.getElementsByTagName("span");
                var m = oSpan[0].innerHTML;
                var n = oSpan[1].innerHTML;
                var timer = setInterval(function(){
                    n--;
                    if(n % 60 == 0) {
                        m--;
                        n = m == 0 ? 0 : 60;
                    } 
                    if(m == 0) {
                        clearTimeout(timer);
                    }

                    oSpan[0].innerHTML = m;
                    oSpan[1].innerHTML = n;
                }, 1000);
            };  
            countDown();
        }
    </script>
</head>
<body>
    <span>12</span>:<span>11</span>
</body>
</html>

 尝试运行下代码1和代码2，你会看到不同的效果。

posted @ 2012-08-18 11:15  fhefh  阅读(454)  评论(0)  编辑  收藏  举报