Count Digits From Start to End Value

Count Digits From Start to End Value
Code Snippet:CountToJS Twitter Card
Author: Ayman
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 239
License: MIT
Edit Code online: View on CodePen
Read More

This JavaScript code snippet helps you to count digits from start to end value. It’s useful for displaying dynamic numerical changes on a webpage. The method `countTo` manages the animation, updating values smoothly over a specified duration. It’s handy for showcasing stats or metrics dynamically.

You can use this code in websites to display live statistics or changing numbers. It’s great for showcasing dynamic data like social media followers or real-time updates. One benefit is its ability to create engaging animations for numerical information, making your website more interactive.

How to Count Digits From Start To End Value

1. First of all, add the following HTML structure into your webpage.

<div class="container">
        <header>
            <div class="bio">
                <div class="desc">
                    <h3><a href="https://twitter.com/aymanfarhat">@aymanfarhat</a></h3>
                    <p>Computer programming is the greatest form of self expression, I enjoy building software, 
                        web apps and writing about code.</p>
                </div>
            </div>
        </header>
        <div class="content">
            <div class="data">
                <ul>
                    <li>
                        <span class="num tweets" style="color:#99CC00">0</span>
                        <span class="title title-tweets">Tweets</span>
                    </li>
                    <li>
                    <span class="num followers" style="color:#FFBB33">0</span>
                        <span class="title title-followers">Followers</span>
                    </li>
                    <li>
                        <span class="num following" style="color:#FF4444">0</span>
                        <span class="title title-following">Following</span>
                    </li>
                </ul>
            </div>
            <div class="actions">
                <a href="https://github.com/aymanfarhat/CountToJS">Fork on Github</a>
                <a href="#" class="restart-count" style="visibility:hidden;">Restart Counter</a>
            </div>
        </div>
    </div>    
  <a href="https://github.com/aymanfarhat/CountToJS"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>

2. Now, style the basic interface for the animated digits. Adjust colors and styles to match your website’s theme. Customize the appearance of titles, values, and the restart button:

body{
    font-size: 14px;
    font-family: "Ubuntu";
    background-color:#ecf0f1;
}

h3 a{
    text-decoration:none;
    color: #0099CC;
}

.container{
    width: 320px;
    margin: 3em auto 1em auto;
    padding:8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    padding-bottom: 1.5em;
    background-color: #dde1e2;
    -webkit-box-shadow: #bdc3c7 0 5px 5px;
    -moz-box-shadow: #bdc3c7 0 5px 5px;
    box-shadow: #bdc3c7 0 5px 5px;
    text-align:center;
}

.data{color:#81878b;margin-top:1em;}
.data ul{-webkit-padding-start: 0;}
.data li{
    width: 32%;
    text-align: center;
    display: inline-block;
    font-size: 2em;
    border-right: solid 1px #bdc3c7;
}

.data li:last-child{border:none;}

.data li span.title{
    display: block;
    text-transform: uppercase;
    font-size: .5em;
    margin-top: .6em;
    font-weight: 700;
}

.actions{
    text-align: center;
    margin-top:2em;
}

.actions a{
    margin: 10px 15px;
    background-color: #0099CC;
    width: 150px;
    color: white;
    padding: .5em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    text-decoration:none;
}

3. Make sure to include the required dependencies in your HTML file. Add the jQuery library by using the following CDN link:

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

4. Finally, copy the following JavaScript code for CountToJS and add it to your project. This code enables animated counting functionality.

(function($) {
$.fn.countTo = function(options){
    options = $.extend({}, $.fn.countTo.defaults, options || {});

    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,
    to: 100,
    speed: 1000,
    refreshInterval: 100,
    decimals: 0,
    onUpdate: null,
    onComplete: null,
};
})(jQuery);

/** Target values **/
var tweets = 11154,
    followers = 953,
    following = 627;

/** Elements holding the values **/
var val_tweets = $('.tweets'),
    val_followers = $('.followers'),
    val_following = $('.following');

/** Text description elements **/
var title_tweets = $('.title-tweets'),
    title_followers = $('.title-followers'),
    title_following = $('.title-following');

setTimeout(function(){
    animateCount();
},1500);

function animateCount(){
    $('.restart-count').css('visibility','hidden');

    /** Reset colors **/
    title_tweets.css('color','#81878b');
    title_followers.css('color','#81878b');
    title_following.css('color','#81878b');
    
    /** Reset the values **/
    val_tweets.html("0");
    val_followers.html("0");
    val_following.html("0");

    val_tweets.countTo({
        from: 0,
        to: tweets,
        speed: 5000,
        refreshInterval:20,
        onComplete:function(){
            title_tweets.css('color','#669900');
            val_followers.countTo({
                from: 0,
                to: followers,
                speed: 5000,
                refreshInterval:20,
                onComplete:function(){
                    title_followers.css('color','#FF8800');
                    val_following.countTo({
                        from: 0,
                        to: following,
                        speed: 5000,
                        refreshInterval:20,
                        onComplete:function(){
                            title_following.css('color','#CC0000');
                            $('.restart-count').css('visibility','visible');
                        }
                    });
                }
            });
        }
    });
}

$('.restart-count').click(function(){
    animateCount();
});

That’s all! hopefully, you have successfully created animated numbers to count digits on your webpage. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...