这两天在我们群里聊的时候,有小伙伴问我能不能使用html做一个计时器。
我在想了想之后,做了这样的效果出来
页面使用媒体查询,能够兼容移动端页面。
下面公布相关源码:
HTML代码:
<main id="main">
<section class="thisTime">0000-00-00 星期一 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代码,如果您需要使用,请记得导入。
开源地址
RealMaybe 原创