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

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

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

默認(rèn)進(jìn)來，圖片上的數(shù)字可以從10，逐漸減少到0，如果點擊“RESET”，會重新執(zhí)行。

技術(shù)

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

每秒創(chuàng)建一個JavaScript間隔

使用CSS變換移動數(shù)字堆棧

HTML

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

👉

Next?Episode?Starts?in

10

10

9

8

7

6

5

4

3

2

1

0

Reset

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

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

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

CSS

讓我們開始我們的CSS。

基本樣式

我們?yōu)榘粹o設(shè)置了一些基本樣式，以使其看起來不錯：/_?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;}

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

自定義字體

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

倒數(shù)和數(shù)字的定位

將以下內(nèi)容添加到我們的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區(qū)域設(shè)置為，overflow: hidden以便看不見其視野之外的任何數(shù)字。我們現(xiàn)在看到的只是一個數(shù)字。

看看沒有以下內(nèi)容的幕后情況overflow: hidden：

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

讓我們進(jìn)入我們的JavaScript。

JavaScript

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

創(chuàng)建變量

首先，從DOM中獲取所需的一切并創(chuàng)建變量。//?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;

創(chuàng)建一個計時器

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

使用count和height找出數(shù)字列表的偏移量

offset通過CSS轉(zhuǎn)換將新內(nèi)容應(yīng)用于數(shù)字部分

確保到達(dá)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);}

最后一部分是實際調(diào)用我們的新函數(shù)。添加以下內(nèi)容，我們的計時器應(yīng)該開始工作了！createTimer();

添加重置

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

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

clearInterval(interval);

count?=?0;

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

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

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

}

總結(jié)

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。