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,你会看到不同的效果。

你可能感兴趣的:(javascirpt)