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

JavaScript實現數值自動增加動畫

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

JS實現數值自動增加動畫，效果圖如下：

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

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

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

相關文章

  • es6新增對象的實用方法總結

    es6新增對象的實用方法總結

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

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

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

    微信小程序實現購物車選擇規(guī)格顏色效果

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

    JavaScript實現星級評價效果

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

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

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

    微信小程序實現圖形驗證碼

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

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

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

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

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

    JS數組splice操作實例分析

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

    Javascript中神奇的this

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

最新評論