在本文中，我們將學(xué)習(xí)如何使用?HTML?CSS?和?JavaScript創(chuàng)建響應(yīng)式計(jì)數(shù)器動(dòng)畫(huà)。?我們?cè)诤芏嗟胤蕉伎梢杂?，比如適用于不同類型的個(gè)人網(wǎng)站、企業(yè)網(wǎng)站等，感興趣的可以了解一下

項(xiàng)目基本結(jié)構(gòu)
1.計(jì)數(shù)動(dòng)畫(huà)的 HTML 代碼
2.使用 CSS 設(shè)計(jì)網(wǎng)頁(yè)
3.Counter Up box的基本結(jié)構(gòu)
4.設(shè)計(jì)計(jì)數(shù)器動(dòng)畫(huà)的信息
5.使用 CSS 使其具有響應(yīng)性
6.通過(guò) JavaScript 激活計(jì)數(shù)器動(dòng)畫(huà)
完整源碼下載

在本文中，我們將學(xué)習(xí)如何使用 HTML CSS 和 JavaScript創(chuàng)建響應(yīng)式計(jì)數(shù)器動(dòng)畫(huà)。 我們?cè)诤芏嗟胤蕉伎梢杂?，比如適用于不同類型的個(gè)人網(wǎng)站、企業(yè)網(wǎng)站等。

這種類型的計(jì)數(shù)器動(dòng)畫(huà)最常用于商業(yè)網(wǎng)站。例如，如果你想在你的企業(yè)網(wǎng)站上顯示一些產(chǎn)品的數(shù)量，可以使用此項(xiàng)目。

這里的數(shù)字之間使用了計(jì)數(shù)動(dòng)畫(huà)。開(kāi)發(fā)人員經(jīng)常使用這種類型的響應(yīng)式計(jì)數(shù)器動(dòng)畫(huà)來(lái)創(chuàng)建查詢。但是，如果您愿意，可以借助簡(jiǎn)單的 javascript 來(lái)實(shí)現(xiàn)。

在線演示地址

項(xiàng)目基本結(jié)構(gòu)

目錄結(jié)構(gòu)如下：

1.計(jì)數(shù)動(dòng)畫(huà)的 HTML 代碼

我已經(jīng)使用以下代碼添加了所有信息。這里我做了四個(gè)框，在框中，你可以先看到圖標(biāo)，然后是數(shù)字倒計(jì)時(shí)，然后是文本。

    <div class="wrapper">
      <div class="container">
        <i class="fa-brands fa-html5"></i>
        <span class="num" data-val="580">000</span>
        <span class="text">HTML Project</span>
      </div>

      <div class="container">
        <i class="fa-brands fa-node-js"></i>
        <span class="num" data-val="360">000</span>
        <span class="text">Javascript Project</span>
      </div>

      <div class="container">
        <i class="fa-brands fa-java"></i>
        <span class="num" data-val="248">000</span>
        <span class="text">Java Project</span>
      </div>

      <div class="container">
        <i class="fa-brands fa-python"></i>
        <span class="num" data-val="120">000</span>
        <span class="text">Python Project</span>
      </div>
    </div>

2.使用 CSS 設(shè)計(jì)網(wǎng)頁(yè)

我使用以下 CSS 代碼設(shè)計(jì)了網(wǎng)頁(yè)。這里在網(wǎng)頁(yè)的背景中使用了一張圖片，你可以使用任何背景顏色代替此圖像。

* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: "Poppins", sans-serif;
}

body {
 background: url("https://img-blog.csdnimg.cn/aff605fb499846f5911bec368762e829.png" );
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
 height: 100vh;
}

.wrapper {
 position: absolute;
 width: 80vw;
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
 display: flex;
 justify-content: space-around;
 gap: 10px;}

3.Counter Up box的基本結(jié)構(gòu)

現(xiàn)在我已經(jīng)做了這個(gè)盒子，backdrop-filter：blur (10px)已被用來(lái)制作這些框的 width: 28vmin，height: 28vmin，以及一些模糊的背景。

.container {
 width: 28vmin;
 height: 28vmin;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 padding: 1em 0;
 position: relative;
 font-size: 16px;
 border-radius: 0.5em;
 backdrop-filter: blur(10px);
 box-shadow: -1px -1px 4px #aaa9a9a2,
              1px 1px 7px rgba(147, 149, 151, 0.671);
}

4.設(shè)計(jì)計(jì)數(shù)器動(dòng)畫(huà)的信息

現(xiàn)在，我們使用以下代碼設(shè)計(jì)圖標(biāo)、數(shù)字和文本。圖標(biāo)的顏色 I 藍(lán)色，文本和數(shù)字顏色白色已被使用。你可以在此處根據(jù)自己的喜好更改顏色。

i {
 color: #42f9e8;
 font-size: 3.8em;
 text-align: center;
}

span.num {
 color: #ffffff;
 display: grid;
 place-items: center;
 font-weight: 600;
 font-size: 3em;
}

span.text {
 color: #e0e0e0;
 font-size: 1em;
 text-align: center;
 pad: 0.7em 0;
 font-weight: 400;
 line-height: 0;
}

5.使用 CSS 使其具有響應(yīng)性

現(xiàn)在是時(shí)候讓這個(gè)計(jì)數(shù)器動(dòng)畫(huà)具有響應(yīng)性了，以下的 CSS 可以使其具有響應(yīng)性。

@media screen and (max-width: 1024px) {
.wrapper {
 width: 85vw;
}
.container {
 height: 26vmin;
 width: 26vmin;
 font-size: 12px;
}
}

@media screen and (max-width: 768px) {
.wrapper {
  width: 90vw;
  flex-wrap: wrap;
  gap: 30px;
}
.container {
  width: calc(50% - 40px);
  height: 30vmin;
  margin-bottom: 25px;
  font-size: 14px;
}
}

@media screen and (max-width: 480px) {
.wrapper {
  gap: 15px;
}
.container {
  width: 100%;
  height: 25vmin;
  font-size: 8px;
  margin-bottom: 25px;
}
}

6.通過(guò) JavaScript 激活計(jì)數(shù)器動(dòng)畫(huà)

我們已經(jīng)完成了上面所有的設(shè)計(jì)工作，并讓動(dòng)畫(huà)計(jì)數(shù)器響應(yīng)。現(xiàn)在最重要的是讓它發(fā)揮作用，為此我使用了一些 JavaScript。

let valueDisplays = document.querySelectorAll(".num");
let interval = 4000;

valueDisplays.forEach((valueDisplay) => {
  let startValue = 0;
  let endValue = parseInt(valueDisplay.getAttribute("data-val"));
  let duration = Math.floor(interval / endValue);
  let counter = setInterval(function () {
     startValue += 1;
     valueDisplay.textContent = startValue;
     if (startValue == endValue) {
       clearInterval(counter);
     }
   }, duration);
 });

到這里就完成了，我希望上面的代碼和教程可以幫助你創(chuàng)建這個(gè)響應(yīng)式計(jì)數(shù)器動(dòng)畫(huà)，你可以使用下面的方式獲取源碼。

完整源碼下載

GitHub 地址

到此這篇關(guān)于使用JavaScript實(shí)現(xiàn)響應(yīng)式計(jì)數(shù)器動(dòng)畫(huà)的文章就介紹到這了,更多相關(guān)JavaScript計(jì)數(shù)器動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: