JSFiddle - React, Tailwind, and code Playground

by Nenad Novakovic

HTML

<div id="da-count">We have <span id="da-remain">560</span> keys left in stock.</div>

CSS

#da-count {
    font-family: 'Helvetica', sans-serif;
    font-weight: 300;
    color: #222;
    margin: 12px 0;
}
#da-remain {
    font-weight: 400;
    color: #c99;
}

JavaScript

function daCounter (sum) {
    var daRemain = $("#da-remain");
        daCurrent = parseInt(daRemain.text()),
        daLeft = parseInt(sum),
        daSplit = daCurrent - daLeft;

    var daCount = setInterval(function () {
        daRemain.html(daCurrent - 1);

        daCurrent -= 1;
        
        if (daCurrent == 250) {
            clearInterval(daCount);
            daCount_two();
        }
    }, 50);
    
    function daCount_two () {
        var daCount_two = setInterval(function () {
            daRemain.html(daCurrent - 1);
    
            daCurrent -= 1;
    
            if (daCurrent == 175) {
                clearInterval(daCount_two);
                daCount_three();
            }
        }, 120);
    }
    
    function daCount_three () {
        var daCount_three = setInterval(function () {
            daRemain.html(daCurrent - 1);
    
            daCurrent -= 1;
    
            if (daCurrent == daSplit) clearInterval(daCount_three);
        }, 700);
    }
}

// Trigger function after 50 milliseconds
setTimeout(function () {
    daCounter(105);
}, 50);