Code bộ đếm jQuery đếm tới một số mục tiêu

Trong thời gian vừa qua, thấy một số anh em đang tìm code bộ đếm số. Hôm nay, tôi xin chia sẻ bộ code jQuery. Nó sẽ đếm đến một số mục tiêu ở một tốc độ xác định mà các bạn thiết lập. Không vòng vo nữa, bắt đầu luôn nhé!

Code bộ đếm jQuery đếm tới một số mục tiêu

Bộ thứ nhất

CSS

.timer{width:200px; margin:20px auto;text-align:center;display:block;font-size:20px}
#help{width:500px; margin:20px auto;text-align:center;display:block;font-size:14px}

HTML

<span class="timer"></span>
<hr/>
<span id="help">From: 50 - To: 2500 / Over 5000 Milli-Seconds</span>

JavaScript

(function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});

        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;

        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals));

                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,  // the number the element should start at
        to: 100,  // the number the element should end at
        speed: 1000,  // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,  // the number of decimal places to show
        onUpdate: null,  // callback method for every time the element is updated,
        onComplete: null,  // callback method for when the element finishes updating
    };
})(jQuery);

jQuery(function($) {
        $('.timer').countTo({
            from: 50,
            to: 2500,
            speed: 5000,
            refreshInterval: 50,
            onComplete: function(value) {
                console.debug(this);
            }
        });
    });

Sử dụng tiện ích Live Code Editor để test code trước nhé các bạn.

Bộ code thứ 2

CSS

body{ font:14px Arial; background:#FFF; }
h1{ font-size:20px; border-bottom:2px solid #000; display:inline-block; }

strong{ 
  font-size:50px;
  color:#444;
  vertical-align:middle;
}

br{ clear:both; }

strong:after{ content:'To 'attr(data-to)' 'attr(data-easing); opacity:0.3; font-size:0.4em; margin-left:10px; }

.time{ position:absolute; top:0; right:10px; width:20%; margin-top:20px; color:#666; padding:1em 2em; background:#EEE; font-weight:bold; text-align:center; }
.time span{ opacity:0.5; }
.time span:before{ content:' / '; }
button{ margin-right:15px; padding:10px; width:5em; }

input{ width:90%; display:block; margin:auto; }

HTML

<h1>Run any job in X seconds. Exmaples:</h1>
<br>

<button>Run</button>
<strong data-to='1000000'  data-easing='gompertz'>0</strong>
<br>

<button>Run</button>
<strong data-to='250' data-easing='easeInCubic'>0</strong>
<br>

<button>Run</button>
<strong data-to='30' data-easing='linear'>0</strong>
<br>

<button>Run</button>
<strong data-to='256' data-easing='linear'>128</strong>
<br>

<button>Run</button>
<strong data-to='100' data-easing='exp'>500</strong>
<br>

<div class='time'>
  <time>0</time><span>3s</span>
<input class='speed' type="range" min="1" max="30" step="0.5" value="3">
  <br>
  <a target="_blank" href='https://github.com/yairEO/Do-in'>Github project</a>
</div>

JavaScript

// https://github.com/yairEO/Do-in

var easing = {
    // no easing, no acceleration
    linear: function (t) { return t },
    // accelerating from zero velocity
    easeInQuad: function (t) { return t*t },
    // decelerating to zero velocity
    easeOutQuad: function (t) { return t*(2-t) },
    // acceleration until halfway, then deceleration
    easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },
    // accelerating from zero velocity 
    easeInCubic: function (t) { return t*t*t },
    // decelerating to zero velocity 
    easeOutCubic: function (t) { return (--t)*t*t+1 },
    // acceleration until halfway, then deceleration 
    easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 },
    // accelerating from zero velocity 
    easeInQuart: function (t) { return t*t*t*t },
    // decelerating to zero velocity 
    easeOutQuart: function (t) { return 1-(--t)*t*t*t },
    // acceleration until halfway, then deceleration
    easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t },
    // accelerating from zero velocity
    easeInQuint: function (t) { return t*t*t*t*t },
    // decelerating to zero velocity
    easeOutQuint: function (t) { return 1+(--t)*t*t*t*t },
    // acceleration until halfway, then deceleration 
    easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t },
    // exponential decelerating
    exp: function (t) { return (1-Math.exp(-t*7)) },
    gompertz : function(t){
      return Math.exp(-30 * Math.exp(-13 * t));
    }
};

//////////////////////////////////

(function(){
    var timeElm       = $('time')[0],
        defaultEasing = easing.gompertz,
        duration      = 3; // default duration (in seconds)
  
    // change time duration slider
    $('input').on('change', changeTime);
  
    function changeTime(){
        duration = this.value;
        timeElm.nextElementSibling.innerHTML = duration + 's';
    };

    // click to start doing stuff
    $('button').on('click', function(){
        var $el = $(this.nextElementSibling),
            task = $el.data('task') || new Task( $el[0] );

        this.textContent = task.doin.isPlaying ? 'Run' :'Pause'; // set button's text
        task.doin[task.doin.isPlaying ? 'pause' : 'start'](); // do some action

        $el.data('task', task); // save reference to the instance
    });

  
    ////////////////////////////////////////////////////
    // constructor to run a specific job using Do-in
    function Task(el){
      this.el = el; // the element to run the task on
      // get variables
      this.initialValue = el.innerHTML|0;
      this.toValue      = el.getAttribute('data-to') || 500;
      this.delta        = this.toValue - this.initialValue;
      this.easing       = easing[el.getAttribute('data-easing')] || easing.exp;

      // Do-in settings object
      var settings = {
          step     : this.step.bind(this),
          done     : this.done.bind(this),
          duration : duration,
       //   fps      : 5
      }
      // create an instance of Do-in
      this.doin = new Doin(settings);
    }
 
    // a step of the thing we want to do
    Task.prototype.step = function(t, elapsed){
        // easing 
        t = this.easing(t);
  
        // calculate new value
        var value = this.delta * t + this.initialValue;
      
        // limit value
        if( t > 0.999 )
            value = this.toValue;
      
        value = (value|0).toLocaleString();
        // print value 
        this.el.innerHTML = value;
        timeElm.innerHTML = elapsed.toFixed(2);
    }
    
    // on DONE
    Task.prototype.done = function(){
        this.el.previousElementSibling.textContent = 'Run';
        console.log(this.el, 'done counting!');
        //$(this.el).removeData('doin');
    }

})();


//////////////////////////////////////////////

Đừng quên sử dụng tiện ích Live Code Editor để test code trước nhé các bạn.

Hy vọng bài viết này sẽ giúp ích cho các bạn. Chúc các bạn thành công nhé! Đừng quên để tại ý kiến của mình dưới bài viết này nhé!

Cam Ranh Media

Xem chi tiết