问题描述
最近在学习的过程中一直静不下心来,在网上找了一些计时器软件安装包带很多第三方流氓软件,决定干脆自己做一款。开始考虑利用Js实现计时逻辑业务,后面仔细想了一下,单纯利用CSS3高级就可以实现。
页面设计
页面设计理念好看就行,在此就不多说,直接上静态页面代码!
HTML代码:
<html>
<head>
<title>页面计时器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="mainbox">
<input type="checkbox" id="start" hidden>
<input type="checkbox" id="stop" hidden>
<input type="checkbox" id="reset" hidden>
<div class="timer">
<div class="time-card" id="nowTime"></div>
</div>
<div class="timer">
<div class="time-card" data-type="hours" data-max="24">
<div class="time-card-count"></div>
<div class="time-card-label">时</div>
</div>
<span class="colon">:</span>
<div class="time-card" data-type="minutes" data-max="60">
<div class="time-card-count"></div>
<div class="time-card-label">分</div>
</div>
<span class="colon">:</span>
<div class="time-card" data-type="seconds" data-max="60">
<div class="time-card-count"></div>
<div class="time-card-label">秒</div>
</div>
</div>
<div class="actions">
<label class="btn" disabled for="reset">重置</label>
<label class="btn btn-success" for="start">开始</label>
<label class="btn btn-danger" for="stop">暂停</label>
</div>
<label for="stop" class="regenerate">已重置</label>
</div>
<script>
function refreshCount() {
var myDate = new Date();
document.getElementById("nowTime").innerHTML="当前时间:"+myDate.toLocaleString('chinese',{hour12:false});
};
var t1=window.setInterval(refreshCount,1000);
</script>
</body>
</html>>
CSS主要利用属性选择去实现按钮切换及时间填充,具体见如下代码:
@charset "utf-8";
html,
body {
height: 100%;
overflow: hidden;
}
body {
background: #121212;
font: 400 100% "Roboto", sans-serif;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.mainbox {
width: 320px;
height: 260px;
position: absolute;
top: 50%;
left: 50%;
margin: -130px 0 0 -160px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.timer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0 0 4em;
color: #fff;
}
.time-card {
margin: 0 1em;
text-align: center;
}
.time-card-count {
width: 80px;
height: 77px;
line-height: 77px;
overflow: hidden;
}
.time-card-count:after {
display: block;
font-size: 4em;
}
.time-card-label {
font-size: 0.625em;
text-transform: uppercase;
opacity: 0.7;
}
.colon {
font-size: 2em;
}
.actions .btn {
margin: 0 8px;
vertical-align: middle;
}
.btn {
min-width: 100px;
padding: 8px 24px;
display: inline-block;
border: solid 1px transparent;
font-size: 14px;
letter-spacing: 0.05em;
text-align: center;
background: none;
transition: background 0.25s ease-out;
cursor: pointer;
white-space: nowrap;
}
.btn:focus {
outline: none;
}
.btn-success,
[id="stop"]:checked~.actions [for="stop"] {
border-color: #28A745;
color: #28A745;
}
.btn-success:hover,
[id="stop"]:checked~.actions [for="stop"]:hover {
background: rgba(40, 167, 69, 0.12);
}
.btn-danger {
border-color: #DC3545;
color: #DC3545;
}
.btn-danger:hover {
background: rgba(220, 53, 69, 0.12);
}
.btn-info,
[id="start"]:checked~.actions [for="start"] {
border-color: #17a2b8;
color: #17a2b8;
}
.btn-info:hover,
[id="start"]:checked~.actions [for="start"]:hover {
background: rgba(23, 162, 184, 0.12);
}
.btn[disabled],
[id="start"]:not(:checked)+[id="stop"]:checked~.actions [for="start"] {
color: #fff;
border-color: #fff;
opacity: 0.5;
cursor: not-allowed;
}
[data-max="24"] .time-card-count:after {
content: '00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23';
}
[data-max="60"] .time-card-count:after {
content: '00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59';
}
[id="start"]:checked~.timer [data-type="hours"] .time-card-count:after {
-webkit-animation: counter 86400s infinite steps(24) forwards;
animation: counter 86400s infinite steps(24) forwards;
}
[id="start"]:checked~.timer [data-type="minutes"] .time-card-count:after {
-webkit-animation: counter 3600s infinite steps(60) forwards;
animation: counter 3600s infinite steps(60) forwards;
}
[id="start"]:checked~.timer [data-type="seconds"] .time-card-count:after {
-webkit-animation: counter 60s infinite steps(60) forwards;
animation: counter 60s infinite steps(60) forwards;
}
[id="start"]:checked+[id="stop"]:not(:checked)~.actions [for="start"] {
display: none;
}
[id="start"]:checked~.actions [for="start"] {
font-size: 0;
}
[id="start"]:checked~.actions [for="start"]:after {
content: '重置';
font-size: 14px;
letter-spacing: 0.05em;
}
[id="start"]:checked~.actions [for="stop"] {
display: inline-block;
}
[id="start"]:checked+[id="stop"]:checked~.actions [for="reset"] {
display: none;
}
[for="stop"] {
display: none;
}
[id="start"]:checked+[id="stop"]:checked~.timer .time-card-count:after {
-webkit-animation-play-state: paused !important;
animation-play-state: paused !important;
}
[id="stop"]:checked~.actions [for="stop"] {
font-size: 0;
}
[id="stop"]:checked~.actions [for="stop"]:after {
content: '继续';
font-size: 14px;
letter-spacing: 0.05em;
}
[id="start"]:not(:checked)+[id="stop"]:checked~.regenerate {
display: block;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: #fff;
cursor: pointer;
font-size: 10px;
}
[id="start"]:not(:checked)+[id="stop"]:checked~.regenerate:hover {
text-decoration: underline;
}
@-webkit-keyframes counter {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes counter {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}