如何使用 HTML、CSS 和 JS 生成倒数计时器
2022/05/03 22:12:38
绗 1 姝ワ細鍊掓暟璁℃椂鍣ㄧ殑鍩烘湰缁撴瀯
杩欓噷鎴戜娇鐢ㄤ簡涓琛<h5>鏍囬锛屼竴涓<form>琛ㄥ崟鍜屼袱涓钀<p>杩樻湁涓涓猵ickedTime <div>鐢ㄦ潵鏄剧ず鍓╀綑鏃堕棿銆傜劧鍚庢垜浣跨敤涓嬮潰鐨 css 浠ｇ爜璁捐浜嗙綉椤礲ody鐨勬牱寮忋傛垜浣跨敤浜嗚嚜宸卞簱瀛樼殑涓寮犲浘鐗囦綔涓鸿儗鏅浘锛屼綘涔熷彲浠ヤ娇鐢ㄤ换浣曞叾浠栨偍鎯宠鐨勯鑹叉垨鑰呭浘鐗囥
HTML
<div class="container">
<h5>娣诲姞鏃ユ湡</h5>
<form id="addDate">
<input type="date" name="date" id="date">
<input type="time" name="time" id="time">
<button type="submit">鎻愪氦</button>
</form>
<p class="hidden">鎴鏃ユ湡<br><span id="until"></span></p>
<p class="hidden">杩樺墿鐨勬椂闂</p>
<div class="pickedTime">
<div class="time">
<span id="time-years">-</span>
<p>骞</p>
</div>
<div class="time">
<span id="time-days">-</span>
<p>澶</p>
</div>
<div class="time">
<span id="time-hours">-</span>
<p>鏃</p>
</div>
<div class="time">
<span id="time-minutes">-</span>
<p>鍒</p>
</div>
<div class="time">
<span id="time-seconds">-</span>
<p>绉</p>
</div>
</div>
</div>
CSS
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
width: 100%;
min-height: 100vh;
font-family: "Roboto", sans-serif;
background: url("http://haiyong.site/wp-content/uploads/2021/09/3a2bd7324818ffb7fa6ed0e753a8d560.jpg") no-repeat center/cover;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
绗 2 姝ワ細浣跨敤 CSS 浠ｇ爜瀹屽杽鏁翠綋鏍峰紡
璋冩殫鑳屾櫙
body::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
container <div> 璁句负灞呬腑
.container {
text-align: center;
margin: 2rem auto 0;
padding: 0 15px;
}
鍐嶅皢鍚勯儴鍒嗗厓绱犲垎绂诲紑
.container > * {
padding: 1rem;
}
璁剧疆h5瀛椾綋澶у皬
.container h5 {
font-size: 2rem;
}
绗 3 姝ワ細璋冭妭鍚勯儴鍒嗗厓绱犵殑甯冨眬
.container form input {
padding: 10px 15px;
font-size: 1.2rem;
border: none;
border-right: 1px solid rgba(0, 0, 0, 0.5);
}
.container form button {
font-size: 1.2rem;
outline: none;
border: none;
padding: 10px 15px;
background: #ffffff;
color: #b6281b;
cursor: pointer;
transition: 0.2s linear;
}
.container form button:hover {
background: #b6281b;
color: #ffffff;
}
.container h1 {
font-size: 3rem;
text-transform: uppercase;
}
.container h5, .container h1, .container p {
color: #ffffff;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.container p {
font-size: 1.2rem;
width: 80%;
margin: auto;
}
.container .hidden {
display: none;
}
.container .pickedTime {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.container .pickedTime .time {
margin: 0.5rem;
padding: 0.5rem 1rem;
background: #ffffff;
}
.container .pickedTime .time span {
font-size: 2.5rem;
color: #b6281b;
}
.container .pickedTime .time p {
color: #000000;
width: 100%;
}
.container .boxes {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.container .boxes .box {
background: #ffffff;
margin: 1rem;
padding: 1rem 2rem;
display: flex;
flex-direction: column;
text-align: center;
}
.container .boxes .box span {
color: #b6281b;
font-weight: bold;
font-size: 4rem;
}
.container .boxes .box p {
color: #000000;
width: 100%;
}
绗 4 姝ワ細浣跨敤 JavaScript 浠ｇ爜婵娲诲畠
鐜板湪鎴戝凡缁忓湪 JavaScript 鐨勫府鍔╀笅瀹炵幇浜嗚繖涓掓暟璁℃椂鍣ㄣ傛垜浠渶瑕佽幏鍙栫敤鎴疯缃簡涓涓壒瀹氱殑鏃ユ湡Date.parse銆備篃灏辨槸璇达紝鎮ㄥ繀椤荤‘瀹氳杩愯鍊掕鏃剁殑鏃堕棿銆
鉃 涓鍒嗛挓绛変簬 60 绉掞紝鎵浠ュ湪杩欑鎯呭喌涓 m = s * 60
鉃 涓灏忔椂绛変簬 60 鍒嗛挓锛屽湪杩欑鎯呭喌涓 h = m * 60
鉃 涓澶╃瓑浜 24 灏忔椂锛屾墍浠ュ湪杩欑鎯呭喌涓 d = h * 24銆
鉃 涓骞寸瓑浜 365澶╋紝鎵浠ュ湪杩欑鎯呭喌涓 y = d * 365銆
const s = 1000,
m = s * 60,
h = m * 60,
d = h * 24,
y = d * 365;
鎸囩ず姣1000 姣浣跨敤setInterval. 鐢变簬鍊掕鏃舵椂闂存瘡绉掗兘鏄棿姝囨х殑锛屾墍浠ヨ繖涓郴缁熼渶瑕佹瘡绉掓洿鏂颁竴娆°
setInterval(() => {
counting();
}, 1000);
鑾峰彇鐢ㄦ埛鎻愪緵鐨勬椂闂
const date = document.getElementById('date').value,
time = document.getElementById('time').value,
timeYears = document.getElementById('time-years'),
timeDays = document.getElementById('time-days'),
timeHours = document.getElementById('time-hours'),
timeMinutes = document.getElementById('time-minutes'),
timeSeconds = document.getElementById('time-seconds');
鎴戜娇鐢ㄧ殑鏄痭ew Date ()浠庤澶囦腑鑾峰彇褰撳墠鏃堕棿鐨勬柟娉曘傚湪杩欑鎯呭喌涓嬭繖閲屼娇鐢ㄧ殑鏃堕棿涓嶆槸浠讳綍鏈嶅姟鍣ㄧ殑鏃堕棿锛岃屾槸浣犺澶囩殑褰撳湴鏃堕棿锛岀劧鍚庝娇鐢ㄤ簡JavaScript 涓殑Math.floor
const interval = setInterval(() => {
const pickedDate = new Date(`${date} ${time}`).getTime(),
currentDate = new Date().getTime(),
difference = pickedDate - currentDate,
years = Math.floor(difference / y);
if (years < 1) {
timeYears.parentElement.style.display = 'none';
} else {
timeYears.parentElement.style.display = 'block';
}
timeYears.innerHTML = Math.floor(difference / y);
timeDays.innerHTML = Math.floor((difference % y) / d);
timeHours.innerHTML = Math.floor((difference % d) / h);
timeMinutes.innerHTML = Math.floor((difference % h) / m);
timeSeconds.innerHTML = Math.floor((difference % m) / s);
}, 1000);
鏈缁堝畬鏁寸殑 JavaScript 浠ｇ爜
const s = 1000,
m = s * 60,
h = m * 60,
d = h * 24,
y = d * 365;
setInterval(() => {
counting();
}, 1000);
const formAddDate = document.getElementById('addDate');
formAddDate.addEventListener('submit', addTime);
function addTime(e) {
const date = document.getElementById('date').value,
time = document.getElementById('time').value,
timeYears = document.getElementById('time-years'),
timeDays = document.getElementById('time-days'),
timeHours = document.getElementById('time-hours'),
timeMinutes = document.getElementById('time-minutes'),
timeSeconds = document.getElementById('time-seconds');
if (date && time) {
const chosenDate = new Date(`${date} ${time}`)
document.getElementById('until').innerText = chosenDate.toString();
const hidden = document.querySelectorAll('.hidden');
hidden.forEach(el => el.style.display = 'block');
const interval = setInterval(() => {
const pickedDate = new Date(`${date} ${time}`).getTime(),
currentDate = new Date().getTime(),
difference = pickedDate - currentDate,
years = Math.floor(difference / y);
if (years < 1) {
timeYears.parentElement.style.display = 'none';
} else {
timeYears.parentElement.style.display = 'block';
}
timeYears.innerHTML = Math.floor(difference / y);
timeDays.innerHTML = Math.floor((difference % y) / d);
timeHours.innerHTML = Math.floor((difference % d) / h);
timeMinutes.innerHTML = Math.floor((difference % h) / m);
timeSeconds.innerHTML = Math.floor((difference % m) / s);
}, 1000);
document.querySelector('button').addEventListener('click', () => {
clearInterval(interval);
});
formAddDate.reset();
}
e.preventDefault();
}
杩欓噷鎴戜娇鐢ㄤ簡涓琛<h5>鏍囬锛屼竴涓<form>琛ㄥ崟鍜屼袱涓钀<p>杩樻湁涓涓猵ickedTime <div>鐢ㄦ潵鏄剧ず鍓╀綑鏃堕棿銆傜劧鍚庢垜浣跨敤涓嬮潰鐨 css 浠ｇ爜璁捐浜嗙綉椤礲ody鐨勬牱寮忋傛垜浣跨敤浜嗚嚜宸卞簱瀛樼殑涓寮犲浘鐗囦綔涓鸿儗鏅浘锛屼綘涔熷彲浠ヤ娇鐢ㄤ换浣曞叾浠栨偍鎯宠鐨勯鑹叉垨鑰呭浘鐗囥
HTML
<div class="container">
<h5>娣诲姞鏃ユ湡</h5>
<form id="addDate">
<input type="date" name="date" id="date">
<input type="time" name="time" id="time">
<button type="submit">鎻愪氦</button>
</form>
<p class="hidden">鎴鏃ユ湡<br><span id="until"></span></p>
<p class="hidden">杩樺墿鐨勬椂闂</p>
<div class="pickedTime">
<div class="time">
<span id="time-years">-</span>
<p>骞</p>
</div>
<div class="time">
<span id="time-days">-</span>
<p>澶</p>
</div>
<div class="time">
<span id="time-hours">-</span>
<p>鏃</p>
</div>
<div class="time">
<span id="time-minutes">-</span>
<p>鍒</p>
</div>
<div class="time">
<span id="time-seconds">-</span>
<p>绉</p>
</div>
</div>
</div>
CSS
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
width: 100%;
min-height: 100vh;
font-family: "Roboto", sans-serif;
background: url("http://haiyong.site/wp-content/uploads/2021/09/3a2bd7324818ffb7fa6ed0e753a8d560.jpg") no-repeat center/cover;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
绗 2 姝ワ細浣跨敤 CSS 浠ｇ爜瀹屽杽鏁翠綋鏍峰紡
璋冩殫鑳屾櫙
body::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
container <div> 璁句负灞呬腑
.container {
text-align: center;
margin: 2rem auto 0;
padding: 0 15px;
}
鍐嶅皢鍚勯儴鍒嗗厓绱犲垎绂诲紑
.container > * {
padding: 1rem;
}
璁剧疆h5瀛椾綋澶у皬
.container h5 {
font-size: 2rem;
}
绗 3 姝ワ細璋冭妭鍚勯儴鍒嗗厓绱犵殑甯冨眬
.container form input {
padding: 10px 15px;
font-size: 1.2rem;
border: none;
border-right: 1px solid rgba(0, 0, 0, 0.5);
}
.container form button {
font-size: 1.2rem;
outline: none;
border: none;
padding: 10px 15px;
background: #ffffff;
color: #b6281b;
cursor: pointer;
transition: 0.2s linear;
}
.container form button:hover {
background: #b6281b;
color: #ffffff;
}
.container h1 {
font-size: 3rem;
text-transform: uppercase;
}
.container h5, .container h1, .container p {
color: #ffffff;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.container p {
font-size: 1.2rem;
width: 80%;
margin: auto;
}
.container .hidden {
display: none;
}
.container .pickedTime {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.container .pickedTime .time {
margin: 0.5rem;
padding: 0.5rem 1rem;
background: #ffffff;
}
.container .pickedTime .time span {
font-size: 2.5rem;
color: #b6281b;
}
.container .pickedTime .time p {
color: #000000;
width: 100%;
}
.container .boxes {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.container .boxes .box {
background: #ffffff;
margin: 1rem;
padding: 1rem 2rem;
display: flex;
flex-direction: column;
text-align: center;
}
.container .boxes .box span {
color: #b6281b;
font-weight: bold;
font-size: 4rem;
}
.container .boxes .box p {
color: #000000;
width: 100%;
}
绗 4 姝ワ細浣跨敤 JavaScript 浠ｇ爜婵娲诲畠
鐜板湪鎴戝凡缁忓湪 JavaScript 鐨勫府鍔╀笅瀹炵幇浜嗚繖涓掓暟璁℃椂鍣ㄣ傛垜浠渶瑕佽幏鍙栫敤鎴疯缃簡涓涓壒瀹氱殑鏃ユ湡Date.parse銆備篃灏辨槸璇达紝鎮ㄥ繀椤荤‘瀹氳杩愯鍊掕鏃剁殑鏃堕棿銆
鉃 涓鍒嗛挓绛変簬 60 绉掞紝鎵浠ュ湪杩欑鎯呭喌涓 m = s * 60
鉃 涓灏忔椂绛変簬 60 鍒嗛挓锛屽湪杩欑鎯呭喌涓 h = m * 60
鉃 涓澶╃瓑浜 24 灏忔椂锛屾墍浠ュ湪杩欑鎯呭喌涓 d = h * 24銆
鉃 涓骞寸瓑浜 365澶╋紝鎵浠ュ湪杩欑鎯呭喌涓 y = d * 365銆
const s = 1000,
m = s * 60,
h = m * 60,
d = h * 24,
y = d * 365;
鎸囩ず姣1000 姣浣跨敤setInterval. 鐢变簬鍊掕鏃舵椂闂存瘡绉掗兘鏄棿姝囨х殑锛屾墍浠ヨ繖涓郴缁熼渶瑕佹瘡绉掓洿鏂颁竴娆°
setInterval(() => {
counting();
}, 1000);
鑾峰彇鐢ㄦ埛鎻愪緵鐨勬椂闂
const date = document.getElementById('date').value,
time = document.getElementById('time').value,
timeYears = document.getElementById('time-years'),
timeDays = document.getElementById('time-days'),
timeHours = document.getElementById('time-hours'),
timeMinutes = document.getElementById('time-minutes'),
timeSeconds = document.getElementById('time-seconds');
鎴戜娇鐢ㄧ殑鏄痭ew Date ()浠庤澶囦腑鑾峰彇褰撳墠鏃堕棿鐨勬柟娉曘傚湪杩欑鎯呭喌涓嬭繖閲屼娇鐢ㄧ殑鏃堕棿涓嶆槸浠讳綍鏈嶅姟鍣ㄧ殑鏃堕棿锛岃屾槸浣犺澶囩殑褰撳湴鏃堕棿锛岀劧鍚庝娇鐢ㄤ簡JavaScript 涓殑Math.floor
const interval = setInterval(() => {
const pickedDate = new Date(`${date} ${time}`).getTime(),
currentDate = new Date().getTime(),
difference = pickedDate - currentDate,
years = Math.floor(difference / y);
if (years < 1) {
timeYears.parentElement.style.display = 'none';
} else {
timeYears.parentElement.style.display = 'block';
}
timeYears.innerHTML = Math.floor(difference / y);
timeDays.innerHTML = Math.floor((difference % y) / d);
timeHours.innerHTML = Math.floor((difference % d) / h);
timeMinutes.innerHTML = Math.floor((difference % h) / m);
timeSeconds.innerHTML = Math.floor((difference % m) / s);
}, 1000);
鏈缁堝畬鏁寸殑 JavaScript 浠ｇ爜
const s = 1000,
m = s * 60,
h = m * 60,
d = h * 24,
y = d * 365;
setInterval(() => {
counting();
}, 1000);
const formAddDate = document.getElementById('addDate');
formAddDate.addEventListener('submit', addTime);
function addTime(e) {
const date = document.getElementById('date').value,
time = document.getElementById('time').value,
timeYears = document.getElementById('time-years'),
timeDays = document.getElementById('time-days'),
timeHours = document.getElementById('time-hours'),
timeMinutes = document.getElementById('time-minutes'),
timeSeconds = document.getElementById('time-seconds');
if (date && time) {
const chosenDate = new Date(`${date} ${time}`)
document.getElementById('until').innerText = chosenDate.toString();
const hidden = document.querySelectorAll('.hidden');
hidden.forEach(el => el.style.display = 'block');
const interval = setInterval(() => {
const pickedDate = new Date(`${date} ${time}`).getTime(),
currentDate = new Date().getTime(),
difference = pickedDate - currentDate,
years = Math.floor(difference / y);
if (years < 1) {
timeYears.parentElement.style.display = 'none';
} else {
timeYears.parentElement.style.display = 'block';
}
timeYears.innerHTML = Math.floor(difference / y);
timeDays.innerHTML = Math.floor((difference % y) / d);
timeHours.innerHTML = Math.floor((difference % d) / h);
timeMinutes.innerHTML = Math.floor((difference % h) / m);
timeSeconds.innerHTML = Math.floor((difference % m) / s);
}, 1000);
document.querySelector('button').addEventListener('click', () => {
clearInterval(interval);
});
formAddDate.reset();
}
e.preventDefault();
}