如何使用JavaScript創(chuàng)建一個(gè)兔年春節(jié)倒數(shù)計(jì)時(shí)器

這篇文章主要介紹了如何使用JavaScript創(chuàng)建一個(gè)兔年春節(jié)倒數(shù)計(jì)時(shí)器的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇如何使用JavaScript創(chuàng)建一個(gè)兔年春節(jié)倒數(shù)計(jì)時(shí)器文章都會(huì)有所收獲，下面我們一起來看看吧。

我們可以通過多種方式構(gòu)建 JavaScript 倒數(shù)計(jì)時(shí)，我在本教程中展示的這個(gè)兔年春節(jié)倒數(shù)計(jì)時(shí)器 是由 HTML CSS 和 JavaScript 創(chuàng)建的。

它的工作方式非常簡(jiǎn)單，需要兩種類型的時(shí)間。我們要運(yùn)行倒計(jì)時(shí)的當(dāng)前時(shí)間和特定時(shí)間，必須手動(dòng)添加計(jì)時(shí)器倒計(jì)時(shí)，JavaScript 的new Date()用于捕獲當(dāng)前時(shí)間。new Date ()是一種 JavaScript 方法，從設(shè)備獲取當(dāng)前時(shí)間。

如何在 JavaScript 中構(gòu)建倒數(shù)計(jì)時(shí)器

早些時(shí)候我分享了各種簡(jiǎn)單的倒數(shù)計(jì)時(shí)器的設(shè)計(jì)。但是，如果你想制作高級(jí)倒數(shù)計(jì)時(shí)器，那么此設(shè)計(jì)適合你。

下面我分享了一個(gè)關(guān)于如何使用 JavaScript 創(chuàng)建一個(gè)兔年春節(jié)倒數(shù)計(jì)時(shí)器的分步教程。

首先 HTML 添加所有信息。然后我使用 CSS 設(shè)計(jì)了這個(gè)倒數(shù)計(jì)時(shí)器。最后，我使用 JavaScript 使 javascript 計(jì)數(shù)器計(jì)時(shí)器有效。

第1步：創(chuàng)建倒計(jì)時(shí)輸入框

使用下面的 HTML 和 CSS，我創(chuàng)建了一個(gè)輸入日期的地方。這就是我使用輸入法的原因。這里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步：倒數(shù)計(jì)時(shí)器的基本結(jié)構(gòu)

我使用以下 HTML添加了此javascript 倒計(jì)時(shí)的所有信息。 這里基本上做了4個(gè)盒子。一天中的時(shí)間、小時(shí)、分鐘和秒將分別顯示在這些框中。

<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">時(shí)</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 設(shè)計(jì) JavaScript 定時(shí)器

1.設(shè)計(jì)時(shí)間視圖框

.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;
}

我使用下面的 CSS 設(shè)計(jì)了這些盒子。這里使用的框是min-height: 160px，min-width: 160px和 background-color: #fff。

2.在兩個(gè)方框之間加一個(gè)冒號(hào)

現(xiàn)在，在兩個(gè)框之間分別添加了一個(gè)冒號(hào)。這個(gè)冒號(hào)是使用 CSS 的“:: after”添加的。我還使用了font-size: 75px來增加符號(hào)的大小。

.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.設(shè)計(jì)倒計(jì)時(shí)信息

現(xiàn)在我們需要使用以下 CSS 來設(shè)計(jì)框中的倒數(shù)計(jì)時(shí)器信息。這里只能看到文字，看不到時(shí)間相關(guān)的信息，后面使用JavaScript查看倒計(jì)時(shí)時(shí)間。

.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;
}

第四步：簡(jiǎn)單倒數(shù)計(jì)時(shí)器的JavaScript

我已經(jīng)在上面添加了我所有的基本信息來制作這個(gè)javascript 倒計(jì)時(shí)，但尚未實(shí)施。

正如我之前所說，當(dāng)前時(shí)間將首先使用此處的new Date()從你的設(shè)備獲取。然后將從當(dāng)前時(shí)間中減去你輸入的時(shí)間值。

然后，該時(shí)間將以天、小時(shí)、分鐘和秒的形式表示。最后，使用innerHTML，它們顯示在網(wǎng)頁上。然后用setInterval每秒更新一次這個(gè)時(shí)間。

加載事件監(jiān)聽器

loadEventListeners();

function loadEventListeners() {
	// DOMContentLoaded事件在初始 HTML 文檔已完全加載時(shí)觸發(fā)
	document.addEventListener('DOMContentLoaded', function() { calcTime(); });
};

var timeTo = document.getElementById('time-to').value,
		date,
		now = new Date(),
		newYear = new Date('1.1.2023').getTime(),
		startTimer = '';

天、小時(shí)、分鐘和秒的時(shí)間計(jì)算

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;

關(guān)于“如何使用JavaScript創(chuàng)建一個(gè)兔年春節(jié)倒數(shù)計(jì)時(shí)器”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“如何使用JavaScript創(chuàng)建一個(gè)兔年春節(jié)倒數(shù)計(jì)時(shí)器”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。