亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

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

<!DOCTYPE html> 
<html> 
 
 <head> 
  <meta charset="UTF-8"> 
  <title>數(shù)字自動增加</title> 
 </head> 
 
 <body> 
  <h1 id="time">0</h1> 
 
  <script> 
   //數(shù)字自增到某一值動畫參數(shù)（目標元素,自定義配置） 
   function NumAutoPlusAnimation(targetEle, options) { 
 
    /*可以自己改造下傳入的參數(shù)，按照自己的需求和喜好封裝該函數(shù)*/ 
    //不傳配置就把它綁定在相應html元素的data-xxxx屬性上吧 
    options = options || {}; 
 
    var $this = document.getElementById(targetEle), 
     time = options.time || $this.data('time'), //總時間--毫秒為單位 
     finalNum = options.num || $this.data('value'), //要顯示的真實數(shù)值 
     regulator = options.regulator || 100, //調(diào)速器，改變regulator的數(shù)值可以調(diào)節(jié)數(shù)字改變的速度 
 
     step = finalNum / (time / regulator),/*每30ms增加的數(shù)值--*/ 
     count = 0, //計數(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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

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

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

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

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

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

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

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

    JavaScript實現(xiàn)星級評價效果

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

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

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

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

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

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

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

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

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

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

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

    Javascript中神奇的this

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

最新評論