[Помощь] Модифицировать скрипт обратного отсчета

Тема в разделе "JavaScript", создана пользователем Css_Ufa, 4 авг 2012.

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

    Css_Ufa

    Регистр.:
    25 ноя 2008
    Сообщения:
    542
    Симпатии:
    323
    Всем привет!

    Скачал скрипт обратного отсчета времени - http://ruseller.com/lessons.php?rub=32&id=1341

    Хочется его модифицировать, но не могу разобраться.

    Хочется чтобы отображалось 3 поля дней, а не 2, как сейчас.

    А лучше написать условие, в котором говориться, что если остается 99 дней, то отображается 2 поля, а если больше, то 3 поля.

    Спасибо всем за советы!
     
  2. xoxmo

    xoxmo Постоялец

    Регистр.:
    24 мар 2008
    Сообщения:
    142
    Симпатии:
    86
    вот этот скрипт поддерживает требуемые условия из коробки. и 3 поля дней и хоть сколько, если 2 цифры дней, то и полей будет 2.
     
  3. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    Красавчег нравится это.
  4. crazyzubr

    crazyzubr Создатель

    Регистр.:
    26 авг 2012
    Сообщения:
    23
    Симпатии:
    15
    Добавил некоторые изменения, вроде получилось, счетчик работает, но как считает дни не проверял.
    /**
    * @namejQuery Countdown Plugin
    * @authorMartin Angelov
    * @version1.0
    * @urlhttp://tutorialzine.com/2011/12/countdown-jquery/
    * @licenseMIT License
    */

    (function($){

    // Количество секунд в каждом временном отрезке
    var days= 24*60*60,
    hours= 60*60,
    minutes= 60;

    // Создаем плагин
    $.fn.countdown = function(prop){

    var options = $.extend({
    callback: function(){},
    timestamp: 0
    },prop);

    var left, d, h, m, s, positions;

    // инициализируем плагин
    init(this, options);

    positions = this.find('.position');

    (function tick(){

    // Осталось времени
    left = Math.floor((options.timestamp - (new Date())) / 1000);

    if(left < 0){
    left = 0;
    }

    // Осталось дней
    d = Math.floor(left / days);
    updateYear(0, 1, 2, d);
    left -= d*days;

    // Осталось часов
    h = Math.floor(left / hours);
    updateDuo(3, 4, h);
    left -= h*hours;

    // Осталось минут
    m = Math.floor(left / minutes);
    updateDuo(5, 6, m);
    left -= m*minutes;

    // Осталось секунд
    s = left;
    updateDuo(7, 8, s);

    // Вызываем возвратную функцию пользователя
    options.callback(d, h, m, s);

    // Планируем следующий вызов данной функции через 1 секунду
    setTimeout(tick, 1000);
    })();

    // Данная функция обновляет две цифоровые позиции за один раз
    function updateDuo(minor,major,value){
    switchDigit(positions.eq(minor),Math.floor(value/10)%10);
    switchDigit(positions.eq(major),value%10);
    }

    function updateYear(hundert, minor,major,value){
    switchDigit(positions.eq(hundert),Math.floor(value/100)%100);
    updateDuo(minor,major,value)
    }

    return this;
    };


    function init(elem, options){
    elem.addClass('countdownHolder');

    // Создаем разметку внутри контейнера
    $.each(['Days','Hours','Minutes','Seconds'],function(i){
    var s = '';
    if(this=="Days"){
    s = '<span class="position">\
    <span class="digit static">0</span>\
    </span>';
    }
    $('<span class="count'+this+'">').html(
    s+'<span class="position">\
    <span class="digit static">0</span>\
    </span>\
    <span class="position">\
    <span class="digit static">0</span>\
    </span>'
    ).appendTo(elem);

    if(this!="Seconds"){
    elem.append('<span class="countDiv countDiv'+i+'"></span>');
    }
    });

    }

    // Создаем анимированный переход между двумя цифрами
    function switchDigit(position,number){

    var digit = position.find('.digit')

    if(digit.is(':animated')){
    return false;
    }

    if(position.data('digit') == number){
    // Мы уже вывели данную цифру
    return false;
    }

    position.data('digit', number);

    var replacement = $('<span>',{
    'class':'digit',
    css:{
    top:'-2.1em',
    opacity:0
    },
    html:number
    });

    // Класс .static добавляется, когда завершается анимация.
    // Выполнение идет более плавно.

    digit
    .before(replacement)
    .removeClass('static')
    .animate({top:'2.5em',opacity:0},'fast',function(){
    digit.remove();
    })

    replacement
    .delay(100)
    .animate({top:0,opacity:1},'fast',function(){
    replacement.addClass('static');
    });
    }
    })(jQuery);
     
  5. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    если скрипт стоит на локальном компе, то для проверки отсчета дней можно поиграться с системным временем компа :)
     
  6. xoxmo

    xoxmo Постоялец

    Регистр.:
    24 мар 2008
    Сообщения:
    142
    Симпатии:
    86
    скрипт хороший, но у этого скрипта по дефолту внешний вид и эффекты стандартные. скрипт, который я советовал, намного симпатичней, вот демо. и нет проблем с количеством цифр в днях.

    там сколько не играйся со временем компа, не поможет, ибо при выводе дней стоят всего 2 поля для цифр.
     
  7. crazyzubr

    crazyzubr Создатель

    Регистр.:
    26 авг 2012
    Сообщения:
    23
    Симпатии:
    15
    то есть? в приведенном выше скрипте я добавил для дней еще одну цифру.

    если так нужна проверка, то я поставил 100 дней + 5 секунд. в таком виде работает и без игр с системным временем обошлось :).
    //в scripts.js
    ts = (new Date()).getTime() + 100*24*60*60*1000 + 5000;
     
  8. xoxmo

    xoxmo Постоялец

    Регистр.:
    24 мар 2008
    Сообщения:
    142
    Симпатии:
    86
    это относилось не к вашим доработкам, а к скрипту в целом, к его первозданному, так сказать, виду.

    crazyzubr, потестили, работает? что показывает скрипт, если дней 200 осталось, например?
     
  9. crazyzubr

    crazyzubr Создатель

    Регистр.:
    26 авг 2012
    Сообщения:
    23
    Симпатии:
    15
    могу оказаться кэпом, но он 200 дней и показывает...
    Снимок экрана от 2012-08-31 05:24:18.png
     
    xoxmo нравится это.