定时器Interval实现倒计时功能

最新推荐文章于 2024-05-14 16:18:00 发布

晓彬哟

最新推荐文章于 2024-05-14 16:18:00 发布

阅读量3.2k

点赞数 1

分类专栏：工作问题记录

本文链接：https://blog.csdn.net/Xanthin/article/details/50374136

版权

工作问题记录专栏收录该内容

7 篇文章 0 订阅

订阅专栏

功能：
做一个按钮“点击开始” 这里写图片描述，点击之后进入倒计时，倒计时完毕之后变回”点击开始“

代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <button id="timer" onclick="start()">点击开始</button>
    </body>
    <script>
        var inter;//声明定时器变量
        var i = 30;//倒计时时间，30s

        function DownTime() {
            var tdiv = document.getElementById("timer");
            if (i > 0) {
                i--;
                //当定时器启动时按钮设置为点击无效果
                tdiv.setAttribute("onclick","none");
                tdiv.innerHTML = '正在倒计时' + i;
            } else {
                tdiv.innerHTML = '点击开始';
                tdiv.setAttribute("onclick","start()");
                //倒计时结束，关闭定时器，重新设置时间i
                window.clearInterval(inter);
                i = 30;
            }
        }
        //启动倒计时的方法
        function start() {
            //定义定时器
            //Param1 : 定时器执行的方法
            //Param2 : 每隔多长时间执行一次（单位：毫秒）
            inter = window.setInterval("DownTime()", 1000);
        }
    </script>

</html>

晓彬哟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
定时器Interval实现倒计时功能

功能：做一个按钮“点击开始”，点击之后进入倒计时，倒计时完毕之后变回”点击开始“代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="timer" onclick="st
复制链接

扫一扫