如何使用jQuery制作一个简单的计时器？

这两天在我们群里聊的时候，有小伙伴问我能不能使用html做一个计时器。

我在想了想之后，做了这样的效果出来

页面使用媒体查询，能够兼容移动端页面。

---

下面公布相关源码：

HTML代码：

<main id="main">
    <section class="thisTime">0000-00-00&nbsp;星期一&nbsp;00:00:00</section>
    <section class="timer">00:00:00</section>

    <section class="take_box">
        <button class="take_btn" id="btn_begin" title="点击开始计时">开始</button>
        <button class="take_btn" id="btn_record" title="点击记录当前计时" disabled="">记录</button>
        <button class="take_btn" id="btn_cease" title="点击停止计时" disabled="">停止</button>
        <button class="take_btn" id="btn_clear" title="点击清除所有计时">清除</button>
    </section>

    <article class="take"></article>
</main>

 CSS代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

main {
    width: 1000px;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 15px auto;
    overflow: hidden;
    font-size: 25px;
}

section {
    width: 100%;
    min-height: 50px;
    text-align: center;
    line-height: 50px;
}

button.take_btn {
    max-height: 30px;
    padding: 5px 10px;
    margin: 10px 5px;
    cursor: pointer;
}

article.take {
    width: 100%;
    min-height: 50px;
    overflow: auto;
    border: 1px solid #000;
    margin-top: 10px;
}

article.take p {
    width: 100%;
    line-height: 50px;
    text-align: center;
}

@media screen and (max-width: 992px) {
    #main {
        width: 90% !important;
        margin: 15px auto;
    }
}

JavaScript代码【函数部分】

/* 窗口兼容 */
function win_size() {
    let win_height = $(window).height();

    $("#main").css({
        "height": win_height - 30 + "px"
    });

    let thisTime_height = $(".thisTime").height();
    let timer_height = $(".timer").height();
    let take_box_height = $(".take_box").height();

    let take_height = win_height - thisTime_height - timer_height - take_box_height - 50;

    $(".take").css({
        "height": take_height + "px"
    });
};

/* 时间获取 */
function thisTime() {
    let d = new Date();
    let year = d.getFullYear();
    let month = d.getMonth() + 1; // 0~11
    let date = d.getDate();

    let week = d.getDay(); // 0~6 0是周日
    week = numOfChinese(week);

    let hour = doubleNum(d.getHours());
    let min = doubleNum(d.getMinutes());
    let sec = doubleNum(d.getSeconds());

    let thisTime_str = year + "-" + month + "-" + date + " 星期" + week + " " + hour + ":" + min + ":" + sec;

    return thisTime_str;
};

/* 数字转成中文 */
function numOfChinese(num) {
    let arr = ["日", "一", "二", "三", "四", "五", "六"];
    return arr[num];
};

/* 不足两位，前面补0 */
function doubleNum(n) {
    if (n < 10) {
        return "0" + n;
    } else {
        return n;
    }
};

/* 计时器 */
let sec = 0;
let min = 0;
let hour = 0;

function timerFun() {
    /* 秒 */
    sec++;
    $(".sec").html(doubleNum(sec));
    /* 分钟 */
    if (sec > 59) {
        min++;
        $(".min").html(doubleNum(min));

        sec = 0;
        $(".sec").html(doubleNum(sec));

    }
    /* 小时 */
    if (min > 59) {
        hour++;
        $(".hour").html(doubleNum(hour));

        min = 0;
        $(".min").html(doubleNum(min));
    }
    /* 写入 */
    let timer_str = doubleNum(hour) + ":" + doubleNum(min) + ":" + doubleNum(sec);
    $(".timer").html(timer_str);
};

/* 按钮禁用与启用 */
function btn_disabled(disabled_num) {
    if (disabled_num == 0) {
        /* 禁用开始 */
        $("#btn_begin").attr("disabled", "");
        /* 启用停止和记录 */
        $("#btn_cease").removeAttr("disabled");
        $("#btn_record").removeAttr("disabled");
    }
    if (disabled_num == 1) {
        /* 禁用停止和记录 */
        $("#btn_cease").attr("disabled", "");
        $("#btn_record").attr("disabled", "");
        /* 启用开始 */
        $("#btn_begin").removeAttr("disabled");
    }
};

JavaScript代码【执行部分】

/* 主体兼容 */
win_size();
$(window).resize(win_size());

/* 当前时间显示 */
$(".thisTime").html(thisTime());
setInterval(() => {
    $(".thisTime").html(thisTime());
}, 1000);

/* 计时器 */
let timer_class;

/* 开始按钮 */
$("#btn_begin").on("click", () => {
    $(".timer").html("00:00:00");
    sec = 0;
    min = 0;
    hour = 0;
    timer_class = setInterval(timerFun, 1000);
    btn_disabled(0);
});

/* 清除按钮 */
$("#btn_clear").on("click", () => {
    $(".take").html("");
});

/* 停止按钮 */
$("#btn_cease").on("click", () => {
    clearInterval(timer_class);
    btn_disabled(1);
});

/* 记录按钮 */
$("#btn_record").on("click", () => {
    let thisTime_str = $(".timer").html();
    let take_time = `<p class="take_time">` + thisTime_str + `</p>`;
    $(".take").prepend(take_time);
});

---

须注意：本页面导入了jQuery代码，如果您需要使用，请记得导入。

---

开源地址

【Github】Github开源
【Gitee】Gitee开源

RealMaybe 原创