JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="downloadCounter">
    <span class="digit">
        <div class="digitText"></div>
        <div class="digitImage">
            <div class="digitImageElement"></div>
            <div class="digitImageElement"></div>
        </div>
    </span>
    <span class="digit">
        <div class="digitText"></div>
        <div class="digitImage">
            <div class="digitImageElement"></div>
            <div class="digitImageElement"></div>
        </div>
    </span>
    <span class="digit">
        <div class="digitText"></div>
        <div class="digitImage">
            <div class="digitImageElement"></div>
            <div class="digitImageElement"></div>
        </div>
    </span>
    <span class="digit">
        <div class="digitText"></div>
        <div class="digitImage">
            <div class="digitImageElement"></div>
            <div class="digitImageElement"></div>
        </div>
    </span>
    <span class="digitGroupSeparator">,</span>

</div>

CSS

#downloadCounter { width:889px; margin: 0 auto; overflow:hidden; }

#downloadCounter .digit { float:left; position:relative; height:145px; width:73px; margin-left: 4px; overflow:hidden; }
#downloadCounter .digit .digitText { position:absolute; text-indent:-999em; width:73px; display:none; }
#downloadCounter .digit .digitImage { position:absolute; width:73px; height:17690px; }
#downloadCounter .digit .digitImageElement { width:73px; height:8845px; background:url(http://images.apple.com/home/images/billboard_25b_counter_filmstrip.png) no-repeat 0 0; }

JavaScript

function setTime(time){
    var height = 145;
    var imageInterval = 6;
    var elements = ['first', 'second', 'third', 'fourth'];
    var count=0;
    
    $('#downloadCounter .digit').each(function(){
        var $digit = $(this);
        var $element = $digit.find('.digitImageElement:first');
            
        $element.css({
                backgroundPosition: '0 -'+(time[count]*(height*imageInterval))+'px'                
        });
        count++;
    });
}

function changeTime(index, time){
    
}

setTime([1, 2, 2, 5]);