倒计时 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>

<body>

    <div id="time"></div>
    <div onclick="start()">开始</div>
    <div onclick="pasue()">暂停</div>
    <script>
        var totalTime = 1 * 60; // 1分钟
        var timeInter = null
        function timeFun() {
            timeInter = setInterval(updataTime, 1000)
        }

        function updataTime() {

            if (totalTime == 0) {
                clearInterval(timeInter);
                return false
            }
            totalTime = totalTime - 1;
            var timeStr = formateTime(totalTime);
            $("#time").html(timeStr);
            console.log('totalTime ', totalTime);
        }
        // 格式化时间
        function formateTime(time) {
            var h = 0;
            var m = 0;
            var s = time;
            var str = "";
            if (s >= 60) {
                m = parseInt(time / 60);
                s = parseInt(time % 60);
                if (m >= 60) {
                    h = parseInt(m / 60);
                    m = parseInt(m % 60);
                }
            }
            h = h < 10 ? "0" + h : h;
            m = m < 10 ? "0" + m : m;
            s = s < 10 ? "0" + s : s;
            str = h + ':' + m + ':' + s
            return str
        }

        // 开始
        function start() {
            timeFun();
        }
        // 暂停
        function pasue() {
            clearInterval(timeInter);
        }


        timeFun()



    </script>

</body>

</html>
　　

 

posted @ 2024-05-17 14:41  蓝色精灵jah  阅读(18)  评论(0)    收藏  举报