js css3制作电子数字时钟,带秒表进度条,点击暂停或开始设置时钟ui交互特效。
css代码:
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
:root {
--purple-dark: #5F546E;
--purple-light: #827593;
--gray-light: #E5E3E8;
--gray-dark: #A5A2A9;
--light: #fcf8fb;
--transition: all 150ms cubic-bezier(.46,1.13,.67,.87);
}
.clock-container {
width: 405px;
height: 150px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 35px 50px;
background-color: var(--purple-dark);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.825);
}
.clock-container span {
text-transform: uppercase;
font-size: 10px;
text-align: right;
display: block;
}
.clock-container p {
font-size: 60px;
color: var(--light);
font-weight: 100;
}
.clock-container p:first-letter {
letter-spacing: 5px;
}
.container {
width: 560px;
height: 320px;
display: block;
box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.215), -5px -5px 25px rgba(0, 0, 0, 0.125);
background-color: var(--gray-light);
position: relative;
}
.container .top {
width: 215px;
margin: 0 auto;
display: flex;
justify-content: space-between;
margin-top: 40px;
}
.container .top p {
text-transform: uppercase;
font-size: 12px;
font-weight: 900;
color: var(--purple-dark);
letter-spacing: .5px;
cursor: pointer;
}
.container .bottom {
height: 7px;
width: 100%;
position: absolute;
bottom: 0;
background-color: #aaa4b2;
}
.container .bottom .progress-bar {
width: 240px;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 9;
background-color: #615770;
transition: var(--transition);
}
.colon {
--size: 3px;
width: var(--size);
height: 15px;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
.colon::before {
content: '';
width: 100%;
height: var(--size);
background-color: #9892a3;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
.colon::after {
content: '';
width: 100%;
height: var(--size);
background-color: #9892a3;
position: absolute;
bottom: 0;
left: 0;
border-radius: 50%;
}
.toast {
width: 405px;
color: var(--light);
padding: 15px 24px;
background-color: var(--purple-dark);
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
transition: var(--transition);
z-index: 99;
}
.toast p {
font-weight: 400;
font-size: 18px;
}
.toast p:first-letter {
text-transform: uppercase;
}
.toast.show {
bottom: 50px;
}
.toast span {
align-self: center;
font-weight: 500;
cursor: pointer;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
color: var(--purple-light);
background-color: var(--purple-light);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.15;
position: relative;
}
html代码:
<div class="toast" data-type="pause">
<p>时钟已停止。</p><span>关闭</span>
</div>
<div class="toast" data-type="live">
<p>时钟现在是实时的。</p><span>关闭</span>
</div>
<div class="container">
<div class="top">
<p id="pause">暂停</p>
<p id="reset">开始</p>
</div>
<div class="clock-container">
<div class="hours"> <span>时</span>
<p id="hour">00</p>
</div>
<div class="colon"></div>
<div class="minutes"> <span>分</span>
<p id="minute">00</p>
</div>
<div class="colon"></div>
<div class="seconds"><span>秒</span>
<p id="second">00</p>
</div>
</div>
<div class="bottom">
<div class="progress-bar"></div>
</div>
</div>
js代码:
console.clear();
const hour = document.getElementById("hour");
const minute = document.getElementById("minute");
const second = document.getElementById("second");
const progress = document.querySelector(".progress-bar");
const pause = document.getElementById("pause");
const reset = document.getElementById("reset");
const toasts = document.getElementsByClassName("toast");
var interval;
[...toasts].forEach(toast => {
toast.addEventListener("click", hideToast);
});
function hideToast(e) {
const target = e.target;
if (target.tagName.toUpperCase() === "SPAN") {
target.parentNode.classList.remove("show");
}
}
function getCurrentTime() {
const d = new Date();
let h = d.getHours();
let min = d.getMinutes();
let sec = d.getSeconds();
h = h < 10 ? "0" + h : h;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
hour.textContent = h;
minute.textContent = min;
second.textContent = sec;
progress.style.width = +sec / 60 * 100 + "%";
}
function clearClass(className) {
for (let i = 0; i < toasts.length; i++) {
toasts[i].classList.remove(className);
}
}
pause.addEventListener("click", () => {
clearInterval(interval);
clearClass('show');
document.querySelector('div[data-type="pause"]').classList.add("show");
});
reset.addEventListener("click", () => {
interval = setInterval(getCurrentTime, 1000);
clearClass('show');
document.querySelector('div[data-type="live"]').classList.add("show");
});
interval = setInterval(getCurrentTime, 1000);