使用JavaScript實現(xiàn)響應(yīng)式計數(shù)器動畫
在本文中,我們將學(xué)習(xí)如何使用 HTML CSS 和 JavaScript創(chuàng)建響應(yīng)式計數(shù)器動畫。 我們在很多地方都可以用,比如適用于不同類型的個人網(wǎng)站、企業(yè)網(wǎng)站等。
這種類型的計數(shù)器動畫最常用于商業(yè)網(wǎng)站。例如,如果你想在你的企業(yè)網(wǎng)站上顯示一些產(chǎn)品的數(shù)量,可以使用此項目。
這里的數(shù)字之間使用了計數(shù)動畫。開發(fā)人員經(jīng)常使用這種類型的響應(yīng)式計數(shù)器動畫來創(chuàng)建查詢。但是,如果您愿意,可以借助簡單的 javascript 來實現(xiàn)。
項目基本結(jié)構(gòu)
目錄結(jié)構(gòu)如下:
1.計數(shù)動畫的 HTML 代碼
我已經(jīng)使用以下代碼添加了所有信息。這里我做了四個框,在框中,你可以先看到圖標(biāo),然后是數(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è)計網(wǎng)頁
我使用以下 CSS 代碼設(shè)計了網(wǎng)頁。這里在網(wǎng)頁的背景中使用了一張圖片,你可以使用任何背景顏色代替此圖像。
* { 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)做了這個盒子,backdrop-filter:blur (10px)
已被用來制作這些框的 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è)計計數(shù)器動畫的信息
現(xiàn)在,我們使用以下代碼設(shè)計圖標(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ù)器動畫具有響應(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.通過 JavaScript 激活計數(shù)器動畫
我們已經(jīng)完成了上面所有的設(shè)計工作,并讓動畫計數(shù)器響應(yīng)?,F(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)建這個響應(yīng)式計數(shù)器動畫,你可以使用下面的方式獲取源碼。
完整源碼下載
到此這篇關(guān)于使用JavaScript實現(xiàn)響應(yīng)式計數(shù)器動畫的文章就介紹到這了,更多相關(guān)JavaScript計數(shù)器動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于JS實現(xiàn)發(fā)送短信驗證碼后的倒計時功能(無視頁面刷新,頁面關(guān)閉不進(jìn)行倒計時功能)
這篇文章主要介紹了基于JS實現(xiàn)發(fā)送短信驗證碼后的倒計時功能(無視頁面刷新,頁面關(guān)閉不進(jìn)行倒計時功能)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09javascript中setTimeout和setInterval的unref()和ref()用法示例
本文通過一個小例子想大家講解了setTimeout和setInterval的unref()和ref()用法和使用環(huán)境,代碼很簡潔,有需要的小伙伴自己參考下吧。2014-11-11javascript 設(shè)計模式之組合模式原理與應(yīng)用詳解
這篇文章主要介紹了javascript 設(shè)計模式之組合模式原理與應(yīng)用,結(jié)合實例形式分析了javascript組合模式基本概念、原理、應(yīng)用場景及操作注意事項,需要的朋友可以參考下2020-04-04js定義對象或數(shù)組直接量時各瀏覽器對多余逗號的處理(json)
定義對象或數(shù)組直接量時不同瀏覽器引擎對多余逗號的處理,js報錯分為兩種:語法錯誤和運行錯誤。2011-03-03基于JavaScript實現(xiàn)在新的tab頁打開url
這篇文章主要介紹了基于JavaScript實現(xiàn)在新的tab頁打開url 的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08微信小程序 wx:for 與 wx:for-items 與 wx:key的正確用法
這篇文章主要介紹了微信小程序 wx:for 與 wx:for-items 與 wx:key的正確用法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法
這篇文章主要介紹了JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法,實例分析了javascript回調(diào)函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03