倒计时在app后台运行时暂停

最新推荐文章于 2025-09-17 15:58:50 发布

原创最新推荐文章于 2025-09-17 15:58:50 发布 · 868 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js H5 App 倒计时暂停

本文介绍了一种使用HTML、CSS和JavaScript实现的倒计时验证码按钮，通过jQuery库简化了DOM操作，提供了完整的代码示例，展示了如何在点击按钮后启动倒计时并禁用按钮，直至倒计时结束。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<style>
    #num {
        width: 3rem;
    }
</style>

<body>
    <button id="get_code">点此获取验证码</button>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        var time = 60;

        function setTime() {
            var beforeTime = getTime();
            window.setTimeInterval = setInterval(function () {
                time = time - (((getTime() - beforeTime) / 1000).toFixed(0));
                if (time <= 0) {
                    $("#get_code").text('获取验证码');
                    clearInterval(setTimeInterval);
                    return time = 60;
                } else {
                    $("#get_code").text(time + ' s');
                    beforeTime = getTime();
                }

            }, 1000);
        }
        $("#get_code").click(function () {
            setTime();
        })

        //获取当前毫秒数
        function getTime() {
            return Date.now();
        }
    </script>

</body>

</html>

解决