[one_demo_18]js定时器的示例

╰半夏微凉° 2022-04-05 12:40 91阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js定时器</title>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <script>
            $(function () {
                //初始化按钮
                clockInterval.initButton();
            });
    
            // 计时器业务类
            var clockInterval = {
                // 计时数字
                num : 10,
                clockIntervalField : null,
                // 初始化按钮
                initButton : function () {
                    // 初始化计数
                    $("#clock").text(clockInterval.num);
                    // 计时任务
                    function clockIntervalFunction(){
                        // 如果计时大于0,显示计时数字
                        if(clockInterval.num > 0){
                            $("#clock").text(clockInterval.num);
                        }
                        // 倒数1个
                        clockInterval.num--;
                        // alert(clockInterval.num);
                        if(clockInterval.num < 0){
                            $("#clock").text("时间到!");
                            clearInterval(clockInterval.clockIntervalField);
                        }
                    };
                    // 开始倒计时按钮
                    $("input[value='开始倒计时']").click(function () {
                        // 初始化计时变量
                        clockInterval.clockIntervalField = setInterval(clockIntervalFunction, 1000);
                    });
    
                    // 暂停倒计时按钮
                    $("input[value='暂停倒计时']").click(function () {
                        clearInterval(clockInterval.clockIntervalField);
                    });
    
                    // 结束倒计时按钮
                    $("input[value='结束倒计时']").click(function () {
                        clockInterval.num = 0;
                        $("#clock").text("时间到!");
                    });
    
                    // 重置倒计时按钮
                    $("input[value='重置倒计时']").click(function () {
                        clockInterval.num = 10;
                        $("#clock").text(clockInterval.num);
                    });
    
                }
            };
        </script>
    </head>
    <body>
        <div style="margin:10px auto">
            <div style="text-align: center;">
                <h3>jquery或js定时器</h3>
                
                <input type="button" value="开始倒计时" />
                <input type="button" value="暂停倒计时" />
                <input type="button" value="结束倒计时" />
                <input type="button" value="重置倒计时" />
                <div id="clock" style="margin-top:10px;"></div>
            </div>
        </div>
    </body>
    </html>