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

Тема в разделе "JavaScript", создана пользователем verfaa, 24 окт 2014.

Модераторы: ZiX
  1. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    375
    Симпатии:
    41
    Есть задача вывести количество пользователей на сайте и случайным образом понемножку увеличивать его, имитируя бурную активность))
    Искал в нете - не нашел, проблема в том что почти все "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-счетчика лежит простой спрайт http://p1.badoocdn.com/v2/-/-/i/counter_people.16.png
    Страница с примером счетчика - http://badoo.com/en/dating/germany/bayern/munich/page-6/ (у меня показывает только в хроме, в других браузерах скрывает)
     
  2. vipTelnet

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    134
    Симпатии:
    11
    Для того что б на сайте badoo увидеть этот счетчик нужно авторизироваться или нет
    я искал инспектором кода Ваш участок html ни чего не нашел
     
  3. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    375
    Симпатии:
    41
    Нет, авторизовываться не нужно.
    Только повторяю - счетчик виден у меня только в Google Chrome (у меня Версия 38.0.2125.104), выглядит он так:
    [​IMG]

    В других браузерах почему-то скрывает.
    Ребят, а разве сложная задача содрать оттуда этот скрипт? Я тут часто вопросы задаю и ~ 90% случаев получаю ответ, знаю, тут много толковых людей сидит, а тут молчат все, странно...))
     
  4. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    375
    Симпатии:
    41
    Кстати, у кого совсем на показывает, даже в хроме, могут посмотреть в кеше яндекса:
    http://hghltd.yandex.net/yandbtm?fm...sign=8040b2ce41aca5d75d1356cdcfc94814&keyno=0
    Только вот в кешированной странице счетчик уже не работает, видимо какой-то секрет там есть, возможно гдето стоит проверка на домен, короче нужна помощь спеца))
     
  5. Aglok

    Aglok ∞³

    Регистр.:
    9 янв 2012
    Сообщения:
    162
    Симпатии:
    46
    Код:
        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
     
    Последнее редактирование: 2 ноя 2014
    verfaa нравится это.
  6. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    375
    Симпатии:
    41
    Спасибо! При запуске этого кода чистым, т.е. открыв блокнот и скопировав его туда - все работает замечательно.
    Но при попытке встроить его на сайт столкнулся с ошибкой:
    Код:
    TypeError: $(...) is null
    После некоторых экспериментов выяснил что проблемным является участок кода:
    Код:
    var $ = function(e) {
            return "string" == typeof e ? document.getElementById(e) : e || null
    };
    
    На сайте использую jQuery 1.5.2
    Попытки прописать перед проблемным кодом $.noConflict(); jQuery.noConflict(); проблему не решили.
    Опять прошу помочь)
     
  7. Aglok

    Aglok ∞³

    Регистр.:
    9 янв 2012
    Сообщения:
    162
    Симпатии:
    46
    Код:
        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()
            }
        };
     
    verfaa нравится это.