項(xiàng)目中需要做數(shù)字滾動(dòng)增加的效果，一開(kāi)始很懵，研究了一下原理，發(fā)現(xiàn)很簡(jiǎn)單，貼出來(lái)分享一下 ^_^
數(shù)字滾動(dòng)組件：
<template>
<p class="number-grow-warp">
??<span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span>
??</p>
</template>
<script>?export?default?{
??props:?{
????time:?{
??????type:?Number,
??????default:?2
????},
????value:?{
??????type:?Number,
??????default:?720000
????}
??},
??methods:?{
????numberGrow?(ele)?{
??????let?_this?=?this
??????let?step?=?(_this.value?*?10)?/?(_this.time?*?1000)
??????let?current?=?0
??????let?start?=?0
??????let?t?=?setInterval(function?()?{
????????start?+=?step
????????if?(start?>?_this.value)?{
??????????clearInterval(t)
??????????start?=?_this.value
??????????t?=?null
????????}
????????if?(current?===?start)?{
??????????return
????????}
????????current?=?start
????????ele.innerHTML?=?current.toString().replace(/(d)(?=(?:d{3}[+]?)+$)/g,?'$1,')
??????},?10)
????}
??},
??mounted?()?{
????this.numberGrow(this.$refs.numberGrow)
??}
}?</script>
<style>?.number-grow-warp{
??transform:?translateZ(0);
}
.number-grow?{
??font-family:?Arial-BoldMT;
??font-size:?64px;
??color:?#ffaf00;
??letter-spacing:?2.67px;
??margin:110px?0?20px;
??display:?block;
??line-height:64px;
}?</style>
調(diào)用：
<NumberGrow :value="720000"></NumberGrow>
相關(guān)推薦：
更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程入門(mén)??！
以上是vue如何實(shí)現(xiàn)數(shù)位滾動(dòng)增加效果？程式碼範(fàn)例的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
熱門(mén)話題
PHP與Vue：完美搭檔的前端開(kāi)發(fā)利器
Mar 16, 2024 pm 12:09 PM
PHP與Vue：完美搭檔的前端開(kāi)發(fā)利器在當(dāng)今網(wǎng)路快速發(fā)展的時(shí)代，前端開(kāi)發(fā)變得愈發(fā)重要。隨著使用者對(duì)網(wǎng)站和應(yīng)用的體驗(yàn)要求越來(lái)越高，前端開(kāi)發(fā)人員需要使用更有效率和靈活的工具來(lái)創(chuàng)建響應(yīng)式和互動(dòng)式的介面。 PHP和Vue.js作為前端開(kāi)發(fā)領(lǐng)域的兩個(gè)重要技術(shù)，搭配起來(lái)可以稱(chēng)得上是完美的利器。本文將探討PHP和Vue的結(jié)合，以及詳細(xì)的程式碼範(fàn)例，幫助讀者更好地理解和應(yīng)用這兩
Go語(yǔ)言前端技術(shù)探秘：前端開(kāi)發(fā)新視野
Mar 28, 2024 pm 01:06 PM
Go語(yǔ)言作為一種快速、高效的程式語(yǔ)言，在後端開(kāi)發(fā)領(lǐng)域廣受歡迎。然而，很少有人將Go語(yǔ)言與前端開(kāi)發(fā)聯(lián)繫起來(lái)。事實(shí)上，使用Go語(yǔ)言進(jìn)行前端開(kāi)發(fā)不僅可以提高效率，還能為開(kāi)發(fā)者帶來(lái)全新的視野。本文將探討使用Go語(yǔ)言進(jìn)行前端開(kāi)發(fā)的可能性，並提供具體的程式碼範(fàn)例，幫助讀者更了解這一領(lǐng)域。在傳統(tǒng)的前端開(kāi)發(fā)中，通常會(huì)使用JavaScript、HTML和CSS來(lái)建立使用者介面
Django是前端還是後端？一探究竟！
Jan 19, 2024 am 08:37 AM
Django是一個(gè)由Python編寫(xiě)的web應(yīng)用框架，它強(qiáng)調(diào)快速開(kāi)發(fā)和乾淨(jìng)方法。儘管Django是web框架，但要回答Django是前端還是後端這個(gè)問(wèn)題，需要深入理解前後端的概念。前端是指使用者直接和互動(dòng)的介面，後端是指伺服器端的程序，他們透過(guò)HTTP協(xié)定進(jìn)行資料的互動(dòng)。在前端和後端分離的情況下，前後端程式可以獨(dú)立開(kāi)發(fā)，分別實(shí)現(xiàn)業(yè)務(wù)邏輯和互動(dòng)效果，資料的交
vue.js vs.反應(yīng)：特定於項(xiàng)目的考慮因素
Apr 09, 2025 am 12:01 AM
Vue.js適合中小型項(xiàng)目和快速迭代，React適用於大型複雜應(yīng)用。 1)Vue.js易於上手，適用於團(tuán)隊(duì)經(jīng)驗(yàn)不足或項(xiàng)目規(guī)模較小的情況。 2)React的生態(tài)系統(tǒng)更豐富，適合有高性能需求和復(fù)雜功能需求的項(xiàng)目。
前端面試官常問(wèn)的問(wèn)題
Mar 19, 2024 pm 02:24 PM
在前端開(kāi)發(fā)面試中，常見(jiàn)問(wèn)題涵蓋廣泛，包括HTML/CSS基礎(chǔ)、JavaScript基礎(chǔ)、框架和函式庫(kù)、專(zhuān)案經(jīng)驗(yàn)、演算法和資料結(jié)構(gòu)、效能最佳化、跨域請(qǐng)求、前端工程化、設(shè)計(jì)模式以及新技術(shù)和趨勢(shì)。面試官的問(wèn)題旨在評(píng)估候選人的技術(shù)技能、專(zhuān)案經(jīng)驗(yàn)以及對(duì)行業(yè)趨勢(shì)的理解。因此，應(yīng)試者應(yīng)充分準(zhǔn)備這些方面，以展現(xiàn)自己的能力和專(zhuān)業(yè)知識(shí)。
Django：前端和後端開(kāi)發(fā)都能搞定的神奇框架！
Jan 19, 2024 am 08:52 AM
Django：前端和後端開(kāi)發(fā)都能搞定的神奇框架！ Django是一個(gè)高效、可擴(kuò)展的網(wǎng)路應(yīng)用程式框架。它能夠支援多種Web開(kāi)發(fā)模式，包括MVC和MTV，可以輕鬆地開(kāi)發(fā)出高品質(zhì)的Web應(yīng)用程式。 Django不僅支援後端開(kāi)發(fā)，還能夠快速建構(gòu)出前端的介面，透過(guò)模板語(yǔ)言，實(shí)現(xiàn)靈活的視圖展示。 Django把前端開(kāi)發(fā)和後端開(kāi)發(fā)融合成了一種無(wú)縫的整合，讓開(kāi)發(fā)人員不必專(zhuān)門(mén)學(xué)習(xí)
Golang與前端技術(shù)結(jié)合：探討Golang如何在前端領(lǐng)域發(fā)揮作用
Mar 19, 2024 pm 06:15 PM
Golang與前端技術(shù)結(jié)合：探討Golang如何在前端領(lǐng)域發(fā)揮作用，需要具體程式碼範(fàn)例隨著互聯(lián)網(wǎng)和行動(dòng)應(yīng)用的快速發(fā)展，前端技術(shù)也愈發(fā)重要。而在這個(gè)領(lǐng)域中，Golang作為一門(mén)強(qiáng)大的後端程式語(yǔ)言，也可以發(fā)揮重要作用。本文將探討Golang如何與前端技術(shù)結(jié)合，以及透過(guò)具體的程式碼範(fàn)例來(lái)展示其在前端領(lǐng)域的潛力。 Golang在前端領(lǐng)域的角色作為一門(mén)高效、簡(jiǎn)潔且易於學(xué)習(xí)的
Vue.js很難學(xué)習(xí)嗎？
Apr 04, 2025 am 12:02 AM
Vue.js不難學(xué)，特別是對(duì)於有JavaScript基礎(chǔ)的開(kāi)發(fā)者。 1)其漸進(jìn)式設(shè)計(jì)和響應(yīng)式系統(tǒng)簡(jiǎn)化了開(kāi)發(fā)過(guò)程。 2)組件化開(kāi)發(fā)讓代碼管理更高效。 3)使用示例展示了基本和高級(jí)用法。 4)常見(jiàn)錯(cuò)誤可以通過(guò)VueDevtools調(diào)試。 5)性能優(yōu)化和最佳實(shí)踐如使用v-if/v-show和key屬性可提升應(yīng)用效率。
