Search code examples
htmljquery-uijquery-ui-sliderticker

how to create a counter or ticker showing numbers for websites in a slider


How or where can i get a counter something similar to this? I am aware of the sliders but the counter in the slider is something i am looking for and developing the website with HTML5, jquery.


Solution

  • I'm not sure I got the question 100%, anyway, here's my attempt:

    JSFiddle

    var Counter = function(options) {
        var start = options.start;
        this.init = function() {
            var self = this;
            var t = window.setInterval(function() {
                start+=1;
                self.render(start);
             }, options.interval)
        }
    
        this.render = function(number) {
        var stringVal = number.toString();
            var arr = stringVal.split('');
            for(var i = 0; i < arr.length ; i++) {
                $('.number').eq(i).text(arr[i]);
            }
        }
    
        this.init();
    }
    var counter = new Counter({
        start: 123456777,
        interval: 1000 //milliseconds
    });