- 集体网站:【海拥】【摸鱼游戏】【神级源码资源网】
- 前端学习课程：【28个案例趣学前端】【400个JS面试题】
- 想寻找独特学习交换、摸鱼划水的小伙伴，请点击【摸鱼学习交换群】
咱们能够通过多种形式构建 JavaScript 倒数计时，我在本教程中展现的这个兔年春节倒数计时器 是由 HTML CSS 和 JavaScript 创立的。
在线地址：https://haiyong.site/demo/tunianjishi.html
它的工作形式非常简单，须要两种类型的工夫。咱们要运行倒计时的以后工夫和特定工夫，必须手动增加计时器倒计时，JavaScript 的new Date()用于捕捉以后工夫。new Date ()是一种 JavaScript 办法，从设施获取以后工夫。
如何在 JavaScript 中构建倒数计时器
早些时候我分享了各种简略的倒数计时器的设计。然而，如果你想制作高级倒数计时器，那么此设计适宜你。
上面我分享了一个对于如何应用 JavaScript 创立一个兔年春节倒数计时器的分步教程。
首先 HTML 增加所有信息。而后我应用 CSS 设计了这个倒数计时器。最初，我应用 JavaScript 使 javascript 计数器计时器无效。
第1步：创立倒计时输入框
应用上面的 HTML 和 CSS，我创立了一个输出日期的中央。这就是我应用输入法的起因。这里type="date"用于抉择和输出日期。
<div class=”clock-input”> <input type=”date” name=”time-to” class=”time-to” id=”time-to” value=”” onchange=”calcTime(this.value)”></div>html { font-size: 62.5%; font-family: “Montserrat”, sans-serif; font-weight: 300; line-height: 1rem; letter-spacing: 0.08rem;}body { display: flex; justify-content: center; align-items: center; flex-flow: column; font-size: 1.4rem; font-weight: inherit; background: url("https://haiyong.site/img/bizhi/2301061.png" ); background-repeat: no-repeat; background-size: cover; height: 100vh;}.clock-input { clear: both; text-align: center; max-width: 250px; width: 100%; height: 60px; line-height: 60px; background-color: #fff; margin: 0 auto 90px;}input#time-to { padding: 5px; border: 0; border-radius: 3px; font-size: 23px; font-family: sans-serif; text-align: center; color: #066dcd; background-color: #fff;}第2步：倒数计时器的根本构造
我应用以下 HTML增加了此javascript 倒计时的所有信息。 这里基本上做了4个盒子。一天中的工夫、小时、分钟和秒将别离显示在这些框中。
<div class="container"> <div class="clock-column"> <p class="clock-day clock-timer"></p> <p class="clock-label">日</p> </div> <div class="clock-column"> <p class="clock-hours clock-timer"></p> <p class="clock-label">时</p> </div> <div class="clock-column"> <p class="clock-minutes clock-timer"></p> <p class="clock-label">分</p> </div> <div class="clock-column"> <p class="clock-seconds clock-timer"></p> <p class="clock-label">秒</p> </div></div>第 3 步：应用 CSS 设计 JavaScript 定时器
1.设计工夫视图框
我应用上面的 CSS 设计了这些盒子。这里应用的框是min-height: 160px，min-width: 160px和 background-color: #fff。
.container { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; height: 20rem; width: 60rem; background-color: transparent; border-radius: 3px; box-shadow: none;}.clock-column { margin-right: 7rem; text-align: center; position: relative; background-color: #fff; min-height: 160px; min-width: 160px; border-radius: 5px;}2.在两个方框之间加一个冒号
当初，在两个框之间别离增加了一个冒号。这个冒号是应用 CSS 的“:: after”增加的。我还应用了font-size: 75px来减少符号的大小。
.clock-column::after { content: ":"; display: block; height: 0.25rem; width: 0.25rem; font-size: 75px; font-weight: 200; color: #feffff; position: absolute; top: 60px; right: -25px;}.clock-column:last-child::after { display: none;}3.设计倒计时信息
当初咱们须要应用以下 CSS 来设计框中的倒数计时器信息。这里只能看到文字，看不到工夫相干的信息，前面应用JavaScript查看倒计时工夫。
.clock-label { padding-top: 20px; text-transform: uppercase; color: #131313; font-size: 16px; text-align: center; border-top: 2px solid rgba(6, 121, 215, 0.989);}.clock-timer { color: #131313; font-size: 46px; line-height: 1;} 第四步：简略倒数计时器的JavaScript
我曾经在下面增加了我所有的根本信息来制作这个javascript 倒计时，但尚未施行。
正如我之前所说，以后工夫将首先应用此处的new Date()从你的设施获取。而后将从以后工夫中减去你输出的工夫值。
而后，该工夫将以天、小时、分钟和秒的模式示意。最初，应用innerHTML，它们显示在网页上。而后用setInterval每秒更新一次这个工夫。
加载事件监听器
loadEventListeners();function loadEventListeners() { // DOMContentLoaded事件在初始 HTML 文档已齐全加载时触发 document.addEventListener('DOMContentLoaded', function() { calcTime(); });};var timeTo = document.getElementById('time-to').value, date, now = new Date(), newYear = new Date('1.1.2023').getTime(), startTimer = '';天、小时、分钟和秒的工夫计算
var days = Math.floor(distance / (1000 * 60 * 60 * 24));var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));var seconds = Math.floor((distance % (1000 * 60)) / 1000);select元素
document.querySelector('.clock-day').innerHTML = days;document.querySelector('.clock-hours').innerHTML = hours;document.querySelector('.clock-minutes').innerHTML = minutes;document.querySelector('.clock-seconds').innerHTML = seconds;到这里咱们就实现了，附上残缺源码：https://code.juejin.cn/pen/7185452719165931572