使用说明
开始正计时:点击工具栏的“开始正计时”按钮即可,快捷键为"Enter"键。
开始倒计时:在输入框内写入时间后,点击“开始倒计时”按钮,即可开始倒计时。
暂停计时器:点击“暂停计时器”按钮即可暂停。
清空正/倒计时:点击此按钮,计时器便会回到初始状态,等待新的计时。
重新再计时:点击此按钮,计时器便会重新开始此次计时。
恢复计时器:点击此按钮即可从暂停状态中恢复。
代码
html
index.html
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="app.js"></script>
</head>
<body>
<div class="toolbar">
<div class="initial">
<form>
<input type="text" id="hour">
<span id="hourLabel">时</span>
<input type="text" id="minute">
<span id="minuteLabel">分</span>
<input type="text" id="second">
<span id="secondLabel">秒</span>
</form>
<button id="countup">开始正计时</button>
<button type="button" id="countdown">开始倒计时</button>
</div>
<span id="hint">正在倒计时 12:20:00</span>
<button type="button" id="clear">清空倒计时</button>
<button type="button" id="pause">暂停计时器</button>
<button type="button" id="restart">重新再计时</button>
<button type="button" id="resume">恢复计时器</button>
<div>
</div>
</div>
<span id="time">00:00:00</span>
</body>
</html>
css
style.css
body {
margin: 0;
padding: 0;
}
.toolbar {
background-color: #97A5BC;
width: 1220px;
height: 70px;
}
#hour {
background-color: white;
border-radius: 5px;
position: absolute;
left: 40px;
top: 15px;
width: 70px;
height: 40px;
font-size: 15px;
}
#hourlabel {
position: absolute;
left: 85px;
top: 23px;
font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
font-size: 16px;
color: #222222
}
#minute {
background-color: white;
border-radius: 5px;
position: absolute;
left: 130px;
top: 15px;
width: 70px;
height: 40px;
font-size: 15px;
}
#minutelabel {
position: absolute;
left: 175px;
top: 23px;
font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
font-size: 16px;
color: #222222
}
#second {
background-color: white;
border-radius: 5px;
position: absolute;
left: 220px;
top: 15px;
width: 70px;
height: 40px;
font-size: 15px;
}
#secondlabel {
position: absolute;
left: 265px;
top: 23px;
font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
font-size: 16px;
color: #222222
}
#countup {
background-color: #2188E9;
border-radius: 5px;
border-color: #2188E9;
position: absolute;
left: 310px;
top: 15px;
width: 98px;
height: 40px;
font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
font-size: 16px;
color: #FFFFFF
}
#countdown {
background-color: #2188E9;
border-radius: 5px;
border-color: #2188E9;
position: absolute;
left: 428px;
top: 15px;
width: 98px;
height: 40px;
font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
font-size: 16px;
color: #FFFFFF
}
#time {
position: absolute;
left: 131px;
top: 197px;
font-size: 200px;
font-family: PTMono-Bold, "PT Mono", monospace;
font-weight: 700;
color: #333333
}
#hint {
position: absolute;
left: 40px;
top: 24px;
font-family: PTMono-Bold, "PT Mono", monospace;
font-size: 16px;
color: white;
}
#pause {
background-color: #2188E9;
border-radius: 5px;
border-color: #2188E9;
position: absolute;
left: 227px;
top: 15px;
width: 98px;
height: 40px;
font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
font-size: 16px;
color: #FFFFFF
}
#clear {
background-color: #DD2E1D;
border-radius: 5px;
border-color: #DD2E1D;
position: absolute;
left: 964px;
top: 15px;
width: 98px;
height: 40px;
font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
font-size: 16px;
color: #FFFFFF
}
#restart {
background-color: #FFB020;
border-radius: 5px;
border-color: #FFB020;
position: absolute;
left: 1082px;
top: 15px;
width: 98px;
height: 40px;
font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
font-size: 16px;
color: #FFFFFF
}
#resume {
background-color: #2188E9;
border-radius: 5px;
border-color: #2188E9;
position: absolute;
left: 227px;
top: 15px;
width: 98px;
height: 40px;
font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
font-size: 16px;
color: #FFFFFF
}
javascript
app.js
window.onload = function() {
function format(Hour, Minute, Second) {
if (Second < 10) {
secondString = "0" + Second;
} else {
secondString = Second;
}
if (Minute < 10) {
minuteString = "0" + Minute;
} else {
minuteString = Minute;
}
if (Hour < 10) {
hourString = "0" + Hour;
} else {
hourString = Hour;
}
return hourString + ":" + minuteString + ":" + secondString;
}
function changeStatus(aimStatus) {
if (aimStatus == 1) {
for (var i = 0; i < initial.length; i++) {
initial[i].style.display = "inline";
}
hint.style.display = "none";
clear.style.display = "none";
pause.style.display = "none";
restart.style.display = "none";
resume.style.display = "none";
} else if (aimStatus == 2 || aimStatus == 3) {
for (var i = 0; i < initial.length; i++) {
initial[i].style.display = "none";
}
hint.style.display = "inline";
clear.style.display = "inline";
pause.style.display = "inline";
restart.style.display = "inline";
resume.style.display = "none";
if (aimStatus == 2) {
// up timing
hint.innerText = "正在正计时";
clear.innerText = "清空正计时";
} else if (aimStatus == 3) {
// down timing
recordHour = parseInt(recordMilliSecond / 3600000);
recordMinute = parseInt((recordMilliSecond % 3600000) / 60000);
recordSecond = parseInt((recordMilliSecond % 60000) / 1000);
hint.innerText = "正在倒计时 " + format(recordHour, recordMinute, recordSecond);
clear.innerText = "清空倒计时";
}
} else if (aimStatus == 4 || aimStatus == 5) {
for (var i = 0; i < initial.length; i++) {
initial[i].style.display = "none";
}
hint.style.display = "inline";
clear.style.display = "inline";
pause.style.display = "none";
restart.style.display = "inline";
resume.style.display = "inline";
if (aimStatus == 4) {
// up pausing
hint.innerText = "暂停正计时";
clear.innerText = "清空正计时";
} else if (aimStatus == 5) {
// down pausing
recordHour = parseInt(recordMilliSecond / 3600000);
recordMinute = parseInt((recordMilliSecond % 3600000) / 60000);
recordSecond = parseInt((recordMilliSecond % 60000) / 1000);
hint.innerText = "暂停倒计时 " + format(recordHour, recordMinute, recordSecond);
clear.innerText = "清空倒计时";
}
} else if (aimStatus == 6) {
for (var i = 0; i < initial.length; i++) {
initial[i].style.display = "none";
}
hint.style.display = "inline";
clear.style.display = "inline";
pause.style.display = "none";
restart.style.display = "inline";
resume.style.display = "none";
recordHour = parseInt(recordMilliSecond / 3600000);
recordMinute = parseInt((recordMilliSecond % 3600000) / 60000);
recordSecond = parseInt((recordMilliSecond % 60000) / 1000);
hint.innerText = "倒计时 " + format(recordHour, recordMinute, recordSecond) + " 已结束";
}
}
function CountUp() {
MilliSecond += 50;
Hour = parseInt(MilliSecond / 3600000);
Minute = parseInt((MilliSecond % 3600000) / 60000);
Second = parseInt((MilliSecond % 60000) / 1000);
time.innerText = format(Hour, Minute, Second);
}
function CountDown() {
MilliSecond -= 50;
Hour = parseInt(MilliSecond / 3600000);
Minute = parseInt((MilliSecond % 3600000) / 60000);
Second = parseInt((MilliSecond % 60000) / 1000);
if (MilliSecond <= 0) {
clearInterval(timer);
changeStatus(6);
}
time.innerText = format(Hour, Minute, Second);
}
var hour = document.getElementById("hour"),
minute = document.getElementById("minute"),
second = document.getElementById("second"),
initial = document.getElementsByClassName("initial"),
countup = document.getElementById("countup"),
countdown = document.getElementById("countdown"),
clear = document.getElementById("clear"),
pause = document.getElementById("pause"),
restart = document.getElementById("restart"),
resume = document.getElementById("resume"),
time = document.getElementById("time"),
timer = null,
Hour = 0,
Minute = 0,
Second = 0,
MilliSecond = 0,
recordMilliSecond = 0;
hourString = "",
minuteString = "",
secondString = "",
// Status---1: before start; 2: up timing; 3: down timing; 4: up pausing;
// 5: down pausing; 6: down finished;
status = 1;
changeStatus(status);
countup.onclick = function() {
status = 2;
MilliSecond = 0;
changeStatus(status);
timer = setInterval(CountUp, 50);
}
countdown.onclick = function() {
status = 3;
Hour = hour.value;
if (minute.value > 59) {
Minute = 59;
} else {
Minute = minute.value;
}
if (second.value > 59) {
Second = 59;
} else {
Second = second.value;
}
hour.value = null;
minute.value = null;
second.value = null;
MilliSecond = Hour * 3600000 + Minute * 60000 + Second * 1000;
recordMilliSecond = MilliSecond;
changeStatus(status);
timer = setInterval(CountDown, 50);
}
clear.onclick = function() {
status = 1;
changeStatus(status);
clearInterval(timer);
time.innerText = format(0, 0, 0);
}
pause.onclick = function() {
if (status == 2) {
// Now count up
status = 4;
changeStatus(status);
clearInterval(timer);
} else if (status == 3) {
// now count down
status = 5;
changeStatus(status);
clearInterval(timer);
}
}
restart.onclick = function() {
if (status == 2 || status == 4) {
status = 2;
MilliSecond = 0;
changeStatus(status);
clearInterval(timer);
timer = setInterval(CountUp, 50);
} else if (status = 3 || status == 5 || status == 6) {
status = 3;
MilliSecond = recordMilliSecond;
changeStatus(status);
clearInterval(timer);
timer = setInterval(CountDown, 50);
}
}
resume.onclick = function() {
if (status == 4) {
status = 2;
changeStatus(status);
timer = setInterval(CountUp, 50);
} else if (status = 5) {
status = 3;
changeStatus(status);
timer = setInterval(CountDown, 50);
}
}
document.onkeydown = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 13) {
// Enter
if (status == 1) {
// before start
status = 2;
MilliSecond = 0;
changeStatus(status);
timer = setInterval(CountUp, 50);
}
}
if (e && e.keyCode == 32) {
// space
if (status == 2) {
// Now count up
status = 4;
changeStatus(status);
clearInterval(timer);
} else if (status == 3) {
// now count down
status = 5;
changeStatus(status);
clearInterval(timer);
} else if (status == 4) {
status = 2;
changeStatus(status);
timer = setInterval(CountUp, 50);
} else if (status == 5) {
status = 3;
changeStatus(status);
timer = setInterval(CountDown, 50);
}
}
};
}