Подправить и запустить скрипт количества пользователей

verfaa

verfaa

Профессор
Регистрация
29 Янв 2007
Сообщения
416
Реакции
49
Есть задача вывести количество пользователей на сайте и случайным образом понемножку увеличивать его, имитируя бурную активность))
Искал в нете - не нашел, проблема в том что почти все "Countdown-счетчик на Jquery с эффектом прокрутки цифр" заточены под отсчет времени и для моей задачи не годятся.
На badoo обнаружил почти идеально подходящий под мои запросы счетчик. Нашел участок кода, который отвечает за него, скопировал, но доработать не получилось. Может гуру яваскрипта помогут запустить и если нужно немного дописать / подправить код чтобы он нормально запустился на моей странице.

HTML:
Код: 
<div class="mp_cnt mp_t" id="counter">
<span class="mp_cnt_num">
<span id="mp_cnt_pos_8" class="mp_cnt_d mp_cnt_d_2"><span class="mp_cnt_d_o">2</span><i class="mp_cnt_d_f"></i></span>
<span id="mp_cnt_pos_7" class="mp_cnt_d mp_cnt_d_2"><span class="mp_cnt_d_o">2</span><i class="mp_cnt_d_f"></i></span>
<span id="mp_cnt_pos_6" class="mp_cnt_d mp_cnt_d_5"><span class="mp_cnt_d_o">5</span><i class="mp_cnt_d_f"></i></span>...</span>people are already here!
</div>

JS:
Код: 
B.UCounter = new $class(B.Page, {name: "UCounter", value: 0, speed: 0, url_sync: "", spf: 3e3, step_to_sync: 10, els: {}, timer: null, step_num: 0, digits_value: null, is_animated: !1, init: function () {
    if (this.value) {
        this.speed = this.speed || 1e-4, this.digits_value = this.value.toString().split("").reverse();
        for (var t = 0; t < this.digits_value.length; t++)if (this.els[t] = $("mp_cnt_pos_" + t), !this.els[t])return;
        this.timer = new $t(this.step, this), this.run()
    }
}, run: function () {
    this.ups = this.spf / 1e3 * this.speed, this.delta = .3 * this.ups, this.ups = .7 * this.ups, this.timer.set(this.spf)
}, step: function () {
    this.step_num++, this.value += this.ups + this.delta * Math.sin(this.step_num / this.step_to_sync * Math.PI * 2);
    var t = Math.floor(this.value);
    this.is_animated || this.refreshDigits(t), this.step_num == this.step_to_sync ? this.sync() : this.timer.set(this.spf)
}, refreshDigits: function (t) {
    t = t.toString().split("").reverse();
    for (var e = {}, i = 0; i <= t.length; i++)t[i] != this.digits_value[i] && (e[i] = {from: this.digits_value[i], to: t[i]});
    this.digits_value = t, this.timer_animate = new $t(this.animate, this), this.animate(e, 0)
}, animate: function (t, e) {
    this.is_animated = !0, e = 2 == e ? 0 : e + 1;
    var i = 0;
    for (var s in t)this.els[s] && (i = 1, 0 == e && (t[s].from = 9 == t[s].from ? 0 : +t[s].from + 1), this.els[s].className = "mp_cnt_d mp_cnt_d_" + t[s].from + (e ? "_" + e : ""), t[s].from == t[s].to && delete t[s]);
    i ? this.timer_animate.set(40, t, e) : this.is_animated = !1
}, sync: function () {
    new $r(this.url_sync, {ready: this.sync_ready}, this)
}, sync_ready: function (t) {
    this.step_num = 0, 0 != t.speed && (this.value = t.value, this.speed = t.speed), this.run()
}})
......
остальной код)

В основе этого Countdown-счетчика лежит простой спрайт Для просмотра ссылки Войди или Зарегистрируйся
Страница с примером счетчика - Для просмотра ссылки Войди или Зарегистрируйся (у меня показывает только в хроме, в других браузерах скрывает)
 
Для того что б на сайте badoo увидеть этот счетчик нужно авторизироваться или нет
я искал инспектором кода Ваш участок html ни чего не нашел
 
Нет, авторизовываться не нужно.
Только повторяю - счетчик виден у меня только в Google Chrome (у меня Версия 38.0.2125.104), выглядит он так:
65b1d00db9a12dd2607020cc3fc4d0f4.png


В других браузерах почему-то скрывает.
Ребят, а разве сложная задача содрать оттуда этот скрипт? Я тут часто вопросы задаю и ~ 90% случаев получаю ответ, знаю, тут много толковых людей сидит, а тут молчат все, странно...))
 
Кстати, у кого совсем на показывает, даже в хроме, могут посмотреть в кеше яндекса:
Для просмотра ссылки Войди или Зарегистрируйся
Только вот в кешированной странице счетчик уже не работает, видимо какой-то секрет там есть, возможно гдето стоит проверка на домен, короче нужна помощь спеца))
 
Код: 
    var DEBUG = !1;

    function $class(e, t) {
        var r, n, i, o, s, a, l;
        if (s = e instanceof Function, t = t || !s && e || {}, e = s && e || null, t.constructor != Object.prototype.constructor ? (r = t.constructor, delete t.constructor) : r = e ? function() {
            arguments.callee.$super.apply(this, arguments)
        } : function() {}, e) {
            n = function() {}, i = n.prototype = e.prototype, o = r.prototype = new n, o.constructor = r, r.$super = e, i.constructor == Object.prototype.constructor && (i.constructor = e);
            for (s in t) a = t[s], l = o[s], a instanceof Function && l instanceof Function && (a.$super = l), o[s] = a
        } else r.prototype = t;
        return this.constructor == arguments.callee ? new r : r
    }

    function $super(e, t) {
    var r = t.callee.$super;
    return arguments.length > 2 && (t = Array.prototype.slice.call(arguments, 2)), r && r.apply(e, t)
    };

    var $t = $class({
        name: "$t",
        t: 0,
        fn: null,
        ctx: null,
        args: null,
        time: 0,
        constructor: function(e, t, r) {
            this.run_ = this.run.bind(this), this.fn = e, this.ctx = t || null, this.time = r || 0
        },
        set: function(e) {
            return this.t && (clearTimeout(this.t), this.t = 0),
                void 0 !== e && (this.time = e),
                this.args = arguments.length > 1 ? Array.prototype.slice.call(arguments, 1) : null,
                this.t = setTimeout(this.run_, this.time),
                this
        },
        clear: function() {
            return this.t && (clearTimeout(this.t), this.t = 0), this
        },
        run: function() {
            this.t = 0, this.args ? this.tryApply("$t", this.fn, this.ctx, this.args) : this.tryCall("$t", this.fn, this.ctx)
        },
        valueOf: function() {
            return +this.t
        },
        tryCall : function(t, r, n) {
            var i = arguments.length > 3 ? Array.prototype.slice.call(arguments, 3) : [];
            if (DEBUG) return r.apply(n, i);
            try {
                var o = r.apply(n, i)
            } catch (s) {
                e.error_log(s, {
                    origin: t + "<" + e.stringify_bind_pair(n, r) + ">"
                })
            }
            return o
        },
        tryApply : function(t, r, n, i) {
            if (DEBUG) return r.apply(n, i);
            try {
                var o = r.apply(n, i)
            } catch (s) {
                e.error_log(s, {
                    origin: t + "<" + e.stringify_bind_pair(n, r) + ">"
                })
            }
            return o
        }
    });

    var $ = function(e) {
        return "string" == typeof e ? document.getElementById(e) : e || null
    };
    window.UCounter = {};
    UCounter = {
        name: "UCounter",
        value: 100000,
        speed: 1.2,
        url_sync: "",
        spf: 3e3,
        step_to_sync: 3e3333,
        els: {},
        timer: 0,
        step_num: 0,
        digits_value: null,
        is_animated: !1,
        init: function() {
            if (this.value) {
                this.speed = this.speed || 1e-4, this.digits_value = this.value.toString().split("").reverse();
                for (var t = 0; t < this.digits_value.length; t++)
                    if (this.els[t] = $("mp_cnt_pos_" + t), !this.els[t]) return;
                this.timer = new $t(this.step, this),
                this.run()
            }
        },
        run: function() {
            this.ups = this.spf / 1e3 * this.speed, this.delta = .3 * this.ups, this.ups = .7 * this.ups, this.timer.set(this.spf);
        },
        step: function() {
            this.step_num++,
            this.value += this.ups + this.delta * Math.sin(this.step_num / this.step_to_sync * Math.PI * 2);
            var t = Math.floor(this.value);
            this.is_animated || this.refreshDigits(t), this.step_num == this.step_to_sync ? this.sync() : this.timer.set(this.spf)
        },
        refreshDigits: function(t) {
            t = t.toString().split("").reverse();
            for (var e = {}, i = 0; i <= t.length; i++)
                t[i] != this.digits_value[i] && (e[i] = {
                from: this.digits_value[i],
                to: t[i]
            });
            this.digits_value = t, this.timer_animate = new $t(this.animate, this), this.animate(e, 0)
        },
        animate: function(t, e) {
            this.is_animated = !0, e = 2 == e ? 0 : e + 1;
            var i = 0;
            for (var s in t) this.els[s] && (i = 1, 0 == e && (t[s].from = 9 == t[s].from ? 0 : +t[s].from + 1), this.els[s].className = "mp_cnt_d mp_cnt_d_" + t[s].from + (e ? "_" + e : ""), t[s].from == t[s].to && delete t[s]);
            i ? this.timer_animate.set(40, t, e) : this.is_animated = !1
        },
        sync: function() {
            new $r(this.url_sync, {
                ready: this.sync_ready
            }, this)
        },
        sync_ready: function(t) {
            this.step_num = 0, 0 != t.speed && (this.value = t.value, this.speed = t.speed), this.run()
        }
    };
И чтобы счетчик заработал.
Код: 
    window.onload = function(){

        UCounter.init();
    }
Стили я взял у них родные:
Код: 
.mp_cnt
{
    z-index: 500;

    margin: 2.8em 3% 0 0;

    white-space: nowrap;

    background-color: #fff;
}.text .mp_cnt
{
    margin-top: 25px;
    margin-bottom: 15px;
}.mp_cnt_num
{
    font-size: 0;
    line-height: 0;

    display: block;

    padding-bottom: 8px;

    text-decoration: none;
}.mp_cnt_d
{
    position: relative;

    display: inline-block;

    width: 37px;
    height: 54px;
    margin-right: 1px;

    background: url(counter_people.16.png) no-repeat 0 0;
}.mp_cnt_d_o,
.mp_cnt_d_os
{
    display: none;
}.mp_cnt_dot,
.mp_cnt_comma,
.mp_cnt_space
{
    overflow: hidden;

    width: 7px;
    height: 7px;
    margin: 51px 1px 0 0;
}.mp_cnt_d_f
{
    position: absolute;
    top: 100%;
    left: 0;

    width: 37px;
    height: 12px;

    background: url(counter_people.16.png) no-repeat -80px -580px;
}.mp_cnt_d_0
{
    background-position: 0 0;
}.mp_cnt_d_0_1
{
    background-position: -40px 0;
}.mp_cnt_d_0_2
{
    background-position: -80px 0;
}.mp_cnt_d_1
{
    background-position: 0 -58px;
}.mp_cnt_d_1_1
{
    background-position: -40px -58px;
}.mp_cnt_d_1_2
{
    background-position: -80px -58px;
}.mp_cnt_d_2
{
    background-position: 0 -116px;
}.mp_cnt_d_2_1
{
    background-position: -40px -116px;
}.mp_cnt_d_2_2
{
    background-position: -80px -116px;
}.mp_cnt_d_3
{
    background-position: 0 -174px;
}.mp_cnt_d_3_1
{
    background-position: -40px -174px;
}.mp_cnt_d_3_2
{
    background-position: -80px -174px;
}.mp_cnt_d_4
{
    background-position: 0 -232px;
}.mp_cnt_d_4_1
{
    background-position: -40px -232px;
}.mp_cnt_d_4_2
{
    background-position: -80px -232px;
}.mp_cnt_d_5
{
    background-position: 0 -290px;
}.mp_cnt_d_5_1
{
    background-position: -40px -290px;
}.mp_cnt_d_5_2
{
    background-position: -80px -290px;
}.mp_cnt_d_6
{
    background-position: 0 -348px;
}.mp_cnt_d_6_1
{
    background-position: -40px -348px;
}.mp_cnt_d_6_2
{
    background-position: -80px -348px;
}.mp_cnt_d_7
{
    background-position: 0 -406px;
}.mp_cnt_d_7_1
{
    background-position: -40px -406px;
}.mp_cnt_d_7_2
{
    background-position: -80px -406px;
}.mp_cnt_d_8
{
    background-position: 0 -464px;
}.mp_cnt_d_8_1
{
    background-position: -40px -464px;
}.mp_cnt_d_8_2
{
    background-position: -80px -464px;
}.mp_cnt_d_9
{
    background-position: 0 -522px;
}.mp_cnt_d_9_1
{
    background-position: -40px -522px;
}.mp_cnt_d_9_2
{
    background-position: -80px -522px;
}.mp_cnt_dot
{
    background-position: -32px -631px;
}.mp_cnt_comma
{
    background-position: -73px -631px;
}.mp_cnt_space
{
    background-position: -81px -631px;
}.mp_cnt .sign
{
    font-size: 1.333em;
}h1
{
    line-height: 1.333em;

    margin-bottom: 1.083em;
}p.bm
{
    margin-bottom: 1.692em;
}.content
{
    margin: 0 1% 0 43%;
}.side
{
    width: 35%;
}.lma
{
    font-size: 1.167em;

    margin: 2em 0 0;
}.lma li
{
    position: relative;

    margin-bottom: .786em;
    padding-left: 25px;
}.lma .c_ic
{
    position: absolute;
    top: 4px;
    left: 0;

    width: 15px;
    height: 15px;

    background-image: url(corp/circles.16.png);
    background-repeat: no-repeat;
}.lma .f
{
    background-position: 0 0;
}.lma .s
{
    background-position: 0 -15px;
}.lma .t
{
    background-position: 0 -30px;
}.lma .fr
{
    background-position: 0 -45px;
}.rbig
{
    margin: 3em 1% 1.25em;
}.content_three
{
    width: 31%;
}.side_three
{
    width: 31%;
}.extra_three
{
    width: 31%;
    margin-left: -32%;
}.news-company
{
    margin: 0 1%;
}.news-company__i
{
    display: inline-block;

    width: 48%;
    margin: 12px -2px 0 4%;

    vertical-align: top;
}.news-company__i:first-child
{
    margin-left: 0;
}.news-company__img
{
    float: left;

    margin-right: -224px;
}.news-company__text
{
    margin-left: 250px;
}.news-company__title
{
    margin-top: 0;
}
Изображение цифер в лежит в root каталога - counter_people.16.png
 
Последнее редактирование:
Спасибо! При запуске этого кода чистым, т.е. открыв блокнот и скопировав его туда - все работает замечательно.
Но при попытке встроить его на сайт столкнулся с ошибкой:
Код: 
TypeError: $(...) is null
После некоторых экспериментов выяснил что проблемным является участок кода:
Код: 
var $ = function(e) {
        return "string" == typeof e ? document.getElementById(e) : e || null
};
На сайте использую jQuery 1.5.2
Попытки прописать перед проблемным кодом $.noConflict(); jQuery.noConflict(); проблему не решили.
Опять прошу помочь)
 
Код: 
    var DEBUG = !1;

    function $class(e, t) {
        var r, n, i, o, s, a, l;
        if (s = e instanceof Function, t = t || !s && e || {}, e = s && e || null, t.constructor != Object.prototype.constructor ? (r = t.constructor, delete t.constructor) : r = e ? function() {
            arguments.callee.$super.apply(this, arguments)
        } : function() {}, e) {
            n = function() {}, i = n.prototype = e.prototype, o = r.prototype = new n, o.constructor = r, r.$super = e, i.constructor == Object.prototype.constructor && (i.constructor = e);
            for (s in t) a = t[s], l = o[s], a instanceof Function && l instanceof Function && (a.$super = l), o[s] = a
        } else r.prototype = t;
        return this.constructor == arguments.callee ? new r : r
    }

    function $super(e, t) {
    var r = t.callee.$super;
    return arguments.length > 2 && (t = Array.prototype.slice.call(arguments, 2)), r && r.apply(e, t)
    };

    var $t = $class({
        name: "$t",
        t: 0,
        fn: null,
        ctx: null,
        args: null,
        time: 0,
        constructor: function(e, t, r) {
            this.run_ = this.run.bind(this), this.fn = e, this.ctx = t || null, this.time = r || 0
        },
        set: function(e) {
            return this.t && (clearTimeout(this.t), this.t = 0),
                void 0 !== e && (this.time = e),
                this.args = arguments.length > 1 ? Array.prototype.slice.call(arguments, 1) : null,
                this.t = setTimeout(this.run_, this.time),
                this
        },
        clear: function() {
            return this.t && (clearTimeout(this.t), this.t = 0), this
        },
        run: function() {
            this.t = 0, this.args ? this.tryApply("$t", this.fn, this.ctx, this.args) : this.tryCall("$t", this.fn, this.ctx)
        },
        valueOf: function() {
            return +this.t
        },
        tryCall : function(t, r, n) {
            var i = arguments.length > 3 ? Array.prototype.slice.call(arguments, 3) : [];
            if (DEBUG) return r.apply(n, i);
            try {
                var o = r.apply(n, i)
            } catch (s) {
                e.error_log(s, {
                    origin: t + "<" + e.stringify_bind_pair(n, r) + ">"
                })
            }
            return o
        },
        tryApply : function(t, r, n, i) {
            if (DEBUG) return r.apply(n, i);
            try {
                var o = r.apply(n, i)
            } catch (s) {
                e.error_log(s, {
                    origin: t + "<" + e.stringify_bind_pair(n, r) + ">"
                })
            }
            return o
        }
    });

    var findel = function(e) {
        return "string" == typeof e ? document.getElementById(e) : e || null
    };
    window.UCounter = {};
    UCounter = {
        name: "UCounter",
        value: 100000,
        speed: 1.2,
        url_sync: "",
        spf: 3e3,
        step_to_sync: 3e3333,
        els: {},
        timer: 0,
        step_num: 0,
        digits_value: null,
        is_animated: !1,
        init: function() {
            if (this.value) {
                this.speed = this.speed || 1e-4, this.digits_value = this.value.toString().split("").reverse();
                for (var t = 0; t < this.digits_value.length; t++)
                    if (this.els[t] = findel("mp_cnt_pos_" + t), !this.els[t]) return;
                this.timer = new $t(this.step, this),
                this.run()
            }
        },
        run: function() {
            this.ups = this.spf / 1e3 * this.speed, this.delta = .3 * this.ups, this.ups = .7 * this.ups, this.timer.set(this.spf);
        },
        step: function() {
            this.step_num++,
            this.value += this.ups + this.delta * Math.sin(this.step_num / this.step_to_sync * Math.PI * 2);
            var t = Math.floor(this.value);
            this.is_animated || this.refreshDigits(t), this.step_num == this.step_to_sync ? this.sync() : this.timer.set(this.spf)
        },
        refreshDigits: function(t) {
            t = t.toString().split("").reverse();
            for (var e = {}, i = 0; i <= t.length; i++)
                t[i] != this.digits_value[i] && (e[i] = {
                from: this.digits_value[i],
                to: t[i]
            });
            this.digits_value = t, this.timer_animate = new $t(this.animate, this), this.animate(e, 0)
        },
        animate: function(t, e) {
            this.is_animated = !0, e = 2 == e ? 0 : e + 1;
            var i = 0;
            for (var s in t) this.els[s] && (i = 1, 0 == e && (t[s].from = 9 == t[s].from ? 0 : +t[s].from + 1), this.els[s].className = "mp_cnt_d mp_cnt_d_" + t[s].from + (e ? "_" + e : ""), t[s].from == t[s].to && delete t[s]);
            i ? this.timer_animate.set(40, t, e) : this.is_animated = !1
        },
        sync: function() {
            new $r(this.url_sync, {
                ready: this.sync_ready
            }, this)
        },
        sync_ready: function(t) {
            this.step_num = 0, 0 != t.speed && (this.value = t.value, this.speed = t.speed), this.run()
        }
    };
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху