当前位置：首页 > news >正文

[one_demo_18]js定时器的示例

news 来源：原创 2024/4/28 19:58:06

<!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>