倒計時功能，在很多地方都會用到，我們平時都習慣去用一些插件來應用，會減少不少的工作量，并且效果也能達到預期。

我今天并不是想分享什么倒計時插件，而是自己寫一個簡單的倒數計時器，有興趣的同學可以往下看看吧！

首先看下最終的功能，如圖：

默認進來，圖片上的數字可以從10，逐漸減少到0，如果點擊“RESET”，會重新執行。

技術

我們將讓CSS處理動畫，因為CSS動畫在瀏覽器中的性能要比JavaScript處理動畫高得多。創建倒數計時器的步驟如下：創建一堆數字

每秒創建一個JavaScript間隔

使用CSS變換移動數字堆棧

HTML

讓我們從所有HTML開始。我們需要兩個按鈕以及所有10-0的數字。

👉

Next?Episode?Starts?in

10

10

9

8

7

6

5

4

3

2

1

0

Reset

我們添加了帶有表情符號的圖標。我們也有一個countdown將包含我們的numbers。

我們擁有倒數div的原因是我們可以10在其中放置一個。這10個負責在我們的UI中為我們的用戶提供一些空間numbers。文件流中將有空間。

我們將不得不numbers絕對定位，這將使它們脫離文檔流。

CSS

讓我們開始我們的CSS。

基本樣式

我們為按鈕設置了一些基本樣式，以使其看起來不錯：/_?button?styles?are?here?_/

button?{

background:?white;

border-radius:?5px;

border:?none;

padding:?15px?30px;

font-size:?24px;

font-family:?'Muli';

display:?block;

text-transform:?uppercase;

letter-spacing:?2px;

cursor:?pointer;

transition:?0.3s?ease?all;

line-height:?1;

display:?flex;}button:hover?{

background:?#eee;}.icon?{

margin-right:?8px;}.reset?{

font-size:?12px;

padding:?8px?16px;

margin:?100px?auto?0;}

現在，我們將提供一些美觀的按鈕。下一步是開始定位我們的數字，以便它們顯示在列中。

自定義字體

我們從fonts.google.com找到了自定義字體，并將鏈接添加到我們的CodePen設置中：https://fonts.googleapis.com/css?family=Muli&display=swap

倒數和數字的定位

將以下內容添加到我們的CSS中。.countdown?{

position:?relative;

display:?block;

text-indent:?-9999px;

overflow:?hidden;

margin-left:?6px;}.numbers?{

position:?absolute;

top:?0;

left:?0;

text-align:?center;

transition:?0.3s?ease?transform;

text-indent:?0;}

我們將countdown區域設置為，overflow: hidden以便看不見其視野之外的任何數字。我們現在看到的只是一個數字。

看看沒有以下內容的幕后情況overflow: hidden：

使用overflow: hidden，我們所有的額外數字都從視圖中隱藏：

讓我們進入我們的JavaScript。

JavaScript

這是開始每秒移動數字的工作所在。

創建變量

首先，從DOM中獲取所需的一切并創建變量。//?grab?parts?of?our?HTML

const?countdownArea?=?document.querySelector('.countdown');

const?numbersArea?=?document.querySelector('.numbers');

const?resetBtn?=?document.querySelector('.reset');

//?create?an?interval?and?counter

let?interval;

let?count?=?0;

//?calculate?the?height?of?our?numbers

const?height?=?countdownArea.getBoundingClientRect().height;

創建一個計時器

接下來，我們將創建一個用于創建計時器的函數。我們需要做的事情是：增加我們的?count

使用count和height找出數字列表的偏移量

offset通過CSS轉換將新內容應用于數字部分

確保到達10點后停止間隔//?create?the?interval?that?creates?the?timerfunction?createTimer()?{

interval?=?setInterval(()?=>?{

//?1.?increment?our?count

count++;

//?2.?calculate?the?offset?and?apply?it

const?offset?=?height?*?count;

//?3.?apply?the?offset?using?css?transforms

numbersArea.style.transform?=?`translateY(-${offset}px)`

//?4.?stop?the?interval?at?10

if?(count?>=?10)?{

//?go?to?the?next?episode

clearInterval(interval);

}

},?1000);}

最后一部分是實際調用我們的新函數。添加以下內容，我們的計時器應該開始工作了！createTimer();

添加重置

最后一部分是添加重置。我們將使用之前抓取的重置按鈕：resetBtn.addEventListener('click',?createTimer);

我們必須在createTimer函數中添加三行以重置所有內容：function?createTimer()?{

clearInterval(interval);

count?=?0;

numbersArea.style.transform?=?'translateY(0)'

//?other?code?goes?here...

//?interval?=?setInterval(()?=>?{...

}

總結

有興趣的童鞋可以去試試吧~~~如果有疑問可以加QQ群咨詢。

總結

以上是生活随笔為你收集整理的倒计时css和js html代码,手把手教你利用CSS和JS创建一个倒数计时器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。