javascirpt倒计时

最新推荐文章于 2025-08-19 08:41:01 发布

weixin_34192816

最新推荐文章于 2025-08-19 08:41:01 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/fhefh/archive/2012/08/18/2645208.html

本文展示了两个HTML+JavaScript实现的计时器代码实例，详细解释了如何使用DOM操作和定时器函数创建倒计时功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/fhefh/archive/2012/08/18/2645208.html