快捷導(dǎo)航

JavaScript實(shí)現(xiàn)數(shù)值自動(dòng)增加動(dòng)畫

更新時(shí)間：2017年12月28日 09:52:18 作者：夏爾_

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)數(shù)值自動(dòng)增加動(dòng)畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

JS實(shí)現(xiàn)數(shù)值自動(dòng)增加動(dòng)畫，效果圖如下：

話不多說，直接上代碼，注釋比較詳細(xì)。

<!DOCTYPE html> 
<html> 
 
 <head> 
  <meta charset="UTF-8"> 
  <title>數(shù)字自動(dòng)增加</title> 
 </head> 
 
 <body> 
  <h1 id="time">0</h1> 
 
  <script> 
   //數(shù)字自增到某一值動(dòng)畫參數(shù)（目標(biāo)元素,自定義配置） 
   function NumAutoPlusAnimation(targetEle, options) { 
 
    /*可以自己改造下傳入的參數(shù)，按照自己的需求和喜好封裝該函數(shù)*/ 
    //不傳配置就把它綁定在相應(yīng)html元素的data-xxxx屬性上吧 
    options = options || {}; 
 
    var $this = document.getElementById(targetEle), 
     time = options.time || $this.data('time'), //總時(shí)間--毫秒為單位 
     finalNum = options.num || $this.data('value'), //要顯示的真實(shí)數(shù)值 
     regulator = options.regulator || 100, //調(diào)速器，改變r(jià)egulator的數(shù)值可以調(diào)節(jié)數(shù)字改變的速度 
 
     step = finalNum / (time / regulator),/*每30ms增加的數(shù)值--*/ 
     count = 0, //計(jì)數(shù)器 
     initial = 0; 
 
    var timer = setInterval(function() { 
 
     count = count + step; 
 
     if(count >= finalNum) { 
      clearInterval(timer); 
      count = finalNum; 
     } 
     //t未發(fā)生改變的話就直接返回 
     //避免調(diào)用text函數(shù)，提高DOM性能 
     var t = Math.floor(count); 
     if(t == initial) return; 
 
     initial = t; 
 
     $this.innerHTML = initial; 
    }, 30); 
   } 
 
   NumAutoPlusAnimation("time", { 
    time: 1500, 
    num: 12000, 
    regulator: 50 
   }) 
  </script> 
 
 </body> 
 
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于JavaScript實(shí)現(xiàn)簡(jiǎn)單的隨機(jī)抽獎(jiǎng)小程序
為了使抽獎(jiǎng)程序能夠無需配置平臺(tái)直接可以在任何一臺(tái)機(jī)器上運(yùn)行，開發(fā)工具和編譯運(yùn)行工具也能夠盡可能簡(jiǎn)單（諸如text文本即可編輯，window系統(tǒng)自帶的瀏覽器即可編譯運(yùn)行的情況），決定嘗試使用javascript來做
2016-01-01
uni-app 項(xiàng)目中 “文件查找失敗：‘crypto-js‘“ 的問題及解決方法
在開發(fā)使用 uni-app 框架的項(xiàng)目時(shí),遇到依賴問題是常見的,本文將介紹如何解決編譯過程中出現(xiàn)的 “文件查找失?。骸甤rypto-js’” 錯(cuò)誤,并說明這種錯(cuò)誤為什么會(huì)發(fā)生以及如何避免,下面分步驟給大家?guī)斫鉀Q方案,感興趣的朋友一起看看吧
2024-07-07
微信小程序嵌入H5頁(yè)面(web-view)的方法詳解
使用<web-view>標(biāo)簽?zāi)茉谛〕绦蛑写蜷_外部網(wǎng)頁(yè),但是要打開的網(wǎng)頁(yè)的域名必須跟小程序的業(yè)務(wù)域名(業(yè)務(wù)域名可以在小程序的后臺(tái)管理界面添加)一致,否則在真機(jī)上是打不開的,下面這篇文章主要給大家介紹了關(guān)于微信小程序嵌入H5頁(yè)面(web-view)的相關(guān)資料,需要的朋友可以參考下
2022-09-09
javascript模擬C#格式化字符串
學(xué)習(xí)C#的朋友都知道format()這個(gè)方法，本文給大家介紹在javascript中如何實(shí)現(xiàn)此操作，js模擬C#字符串格式化操作，需要的盆友一起學(xué)習(xí)吧
2015-08-08
JavaScript插入排序算法原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了JavaScript插入排序算法原理與實(shí)現(xiàn)方法,簡(jiǎn)單分析了插入排序的概念、原理并結(jié)合實(shí)例形式分析了JavaScript插入排序算法的具體實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下
2018-08-08
bootstrap PrintThis打印插件使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap PrintThis打印插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
微信小程序?qū)崿F(xiàn)滾動(dòng)條功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滾動(dòng)條功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
JavaScript實(shí)現(xiàn)封裝一個(gè)快速生成目錄樹的全局腳本
目錄樹可以很好的介紹項(xiàng)目中各文件目錄的用途，幫助讀者了解整個(gè)項(xiàng)目結(jié)構(gòu)。本文就來用JavaScript封裝一個(gè)快速生成目錄樹的全局腳本，希望對(duì)大家有所幫助
2023-03-03
同時(shí)使用n個(gè)window onload加載實(shí)例介紹
window onload加載多個(gè)同時(shí)使用，想必有很多人沒有用過吧，接下來為大家詳細(xì)介紹下具體的使用方法，感興趣的朋友可以參考下
2013-04-04
小程序?qū)崿F(xiàn)輪播圖
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06