vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼

更新時(shí)間：2018年07月06日 09:19:08 作者：澤浩沉

最近做了個(gè)項(xiàng)目需要做數(shù)字滾動(dòng)增加的效果，剛開(kāi)始接到這個(gè)項(xiàng)目還真是懵了，后來(lái)發(fā)現(xiàn)實(shí)現(xiàn)代碼很簡(jiǎn)單的，下面小編給大家?guī)?lái)了vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼，需要的朋友參考下吧

項(xiàng)目中需要做數(shù)字滾動(dòng)增加的效果，一開(kāi)始很懵，研究了一下原理，發(fā)現(xiàn)很簡(jiǎn)單，貼出來(lái)分享一下 ^_^

數(shù)字滾動(dòng)組件：

<template>
<div class="number-grow-warp">
 <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span>
 </div>
</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>

總結(jié)

以上所述是小編給大家介紹的vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue.js實(shí)現(xiàn)的購(gòu)物車(chē)功能詳解
這篇文章主要介紹了Vue.js實(shí)現(xiàn)的購(gòu)物車(chē)功能,結(jié)合實(shí)例形式分析了vue.js購(gòu)物車(chē)的原理、數(shù)值計(jì)算及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-01-01
vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單
這篇文章主要介紹了vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
$解決vue無(wú)法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本$
解決vue無(wú)法加載文件D:\Program Files\nodejs\node_global\vue.ps1,
這篇文章主要給大家介紹了關(guān)于解決vue無(wú)法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本的相關(guān)資料,這個(gè)報(bào)錯(cuò)是由于在系統(tǒng)上禁止運(yùn)行腳本導(dǎo)致的,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
Vue頁(yè)面刷新記住頁(yè)面狀態(tài)的實(shí)現(xiàn)
這篇文章主要介紹了Vue頁(yè)面刷新記住頁(yè)面狀態(tài)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-12-12
在Vue3中創(chuàng)建和使用全局組件的實(shí)現(xiàn)方式
在前端開(kāi)發(fā)中,Vue.js 是一個(gè)廣泛使用的框架,因其靈活性和強(qiáng)大的功能,得到許多開(kāi)發(fā)者的喜愛(ài),Vue 3 的發(fā)布為這一框架帶來(lái)了很多新的特性和改進(jìn),在本文中,我們將詳細(xì)討論如何在 Vue 3 中創(chuàng)建和使用全局組件,并通過(guò)示例代碼展示具體實(shí)現(xiàn)方式,需要的朋友可以參考下
2024-07-07
vue 表單輸入框不支持focus及blur事件的解決方案
這篇文章主要介紹了vue 表單輸入框不支持focus及blur事件的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue3使用localStorage實(shí)現(xiàn)登錄注冊(cè)功能實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3使用localStorage實(shí)現(xiàn)登錄注冊(cè)功能的相關(guān)資料, localStorage這個(gè)特性主要是用來(lái)作為本地存儲(chǔ)來(lái)使用的,解決了cookie存儲(chǔ)空間不足的問(wèn)題,需要的朋友可以參考下
2023-06-06
解決element-ui?el-drawer抽屜el-dialog彈框關(guān)閉優(yōu)化demo
這篇文章主要為大家介紹了解決element-ui?el-drawer抽屜el-dialog彈框關(guān)閉優(yōu)化demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>
2023-06-06
vue分割面板封裝實(shí)現(xiàn)記錄
這篇文章主要為大家詳細(xì)介紹了vue分割面板封裝實(shí)現(xiàn)記錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Uniapp 實(shí)現(xiàn)頂部標(biāo)簽頁(yè)切換功能(詳細(xì)步驟)
本文介紹了如何在UniApp中實(shí)現(xiàn)頂部標(biāo)簽頁(yè)切換功能,u-tab-bar組件提供了便捷的標(biāo)簽切換功能和豐富的樣式選項(xiàng),而swiper組件則更加靈活,支持自定義切換方式,根據(jù)自己的需求選擇合適的方式實(shí)現(xiàn)頂部標(biāo)簽頁(yè)切換,感興趣的朋友一起看看吧
2025-02-02