欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2017年12月28日 09:52:18   作者：夏爾_  
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)數(shù)值自動(dòng)增加動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

話不多說(shuō)，直接上代碼，注釋比較詳細(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)畫(huà)參數(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)文章

  • es6新增對(duì)象的實(shí)用方法總結(jié)

    es6新增對(duì)象的實(shí)用方法總結(jié)

    在JavaScript中,幾乎每一個(gè)值都是某種特定類(lèi)型的對(duì)象,于是ES6也著重提升了對(duì)象的功能性,下面這篇文章主要給大家介紹了關(guān)于es6新增對(duì)象實(shí)用方法的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • 200行代碼實(shí)現(xiàn)blockchain 區(qū)塊鏈實(shí)例詳解

    200行代碼實(shí)現(xiàn)blockchain 區(qū)塊鏈實(shí)例詳解

    這篇文章主要介紹了200行代碼實(shí)現(xiàn)blockchain 區(qū)塊鏈的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
    2018-03-03
  • 微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)選擇規(guī)格顏色效果

    微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)選擇規(guī)格顏色效果

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)選擇規(guī)格顏色選中效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-01-01
  • JavaScript實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果

    JavaScript實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-05-05
  • JavaScript實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)可視化的示例詳解

    JavaScript實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)可視化的示例詳解

    動(dòng)態(tài)數(shù)據(jù)可視化能夠?qū)⒋罅繑?shù)據(jù)以直觀、生動(dòng)的方式呈現(xiàn),幫助用戶更好地理解和分析數(shù)據(jù),本文主要為大家介紹了如何使用JavaScript實(shí)現(xiàn)這一功能,需要的可以參考下
    2024-02-02
  • 微信小程序?qū)崿F(xiàn)圖形驗(yàn)證碼

    微信小程序?qū)崿F(xiàn)圖形驗(yàn)證碼

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖形驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-05-05
  • JS利用?React.lazy?優(yōu)化頁(yè)面初次渲染

    JS利用?React.lazy?優(yōu)化頁(yè)面初次渲染

    這篇文章主要介紹了JS利用?React.lazy?優(yōu)化頁(yè)面初次渲染,React.lazy?接受一個(gè)函數(shù)，這個(gè)函數(shù)需要?jiǎng)討B(tài)調(diào)用import()，它必須返回一個(gè)Promise，該P(yáng)romise需要resolve一個(gè)default?export的React組件
    2022-07-07
  • js 動(dòng)態(tài)給元素添加、移除事件的實(shí)現(xiàn)方法

    js 動(dòng)態(tài)給元素添加、移除事件的實(shí)現(xiàn)方法

    下面小編就為大家?guī)?lái)一篇js 動(dòng)態(tài)給元素添加、移除事件的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-07
  • JS數(shù)組splice操作實(shí)例分析

    JS數(shù)組splice操作實(shí)例分析

    這篇文章主要介紹了JS數(shù)組splice操作,結(jié)合實(shí)例形式分析了javascript使用splice方法刪除數(shù)組元素相關(guān)操作技巧,需要的朋友可以參考下
    2019-10-10
  • Javascript中神奇的this

    Javascript中神奇的this

    這篇文章主要為大家介紹了Javascript中神奇的this，何為this？this的作用有哪些、以及this神奇的綁定規(guī)則，感興趣的小伙伴們可以參考一下
    2016-01-01

最新評(píng)論