Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.07.2016, 13:14
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 174

Как правильно внести изменения в скрипт таймера обратного отсчета времени?
Всех приветствую! Прошу помощи. Есть скрипт таймера обратного отсчета времени до определенной даты. Помогите, пожалуйста, внести в него изменения. Есть несколько моментов:
  • Необходимо добавить в скрипт таймера количество месяцев и количество лет.
  • Второй момент, не могу разобраться, когда таймер заканчивает отсчет, блок становится пустым. Как сделать так, чтобы по окончании таймера, в этом блоке появлялся другой блок?
  • И еще один момент: скрипт ориентирован не на нашего брата, АМ и РМ, не совсем это удобно, возможно ли это изменить, а также поменять местами в первой строке скрипта число и месяц? Очень буду благодарен всем за любую помощь!

скрипт:

var end = new Date('12/01/2018 12:00 AM');

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() {
  var now = new Date();
  var distance = end - now;
  if (distance < 0) {
    clearInterval(timer);
    return;
  }
  var days = Math.floor(distance / _day);
  var hours = Math.floor((distance % _day) / _hour);
  var minutes = Math.floor((distance % _hour) / _minute);
  var seconds = Math.floor((distance % _minute) / _second);

  var daysLabel = pluralize(days, 'Дней');
  var hoursLabel = pluralize(hours, 'Часов');
  var minutesLabel = pluralize(minutes, 'Минут');
  var secondsLabel = pluralize(seconds, 'Секунд');

  var days = leadingZero(days);
  var hours = leadingZero(hours);
  var minutes = leadingZero(minutes);
  var seconds = leadingZero(seconds);

  function pluralize(number, text) {
    if(number === 1) {
      return text;
    } else {
      return text+''
    }
  }

  function leadingZero(number) {
    if(number < 10) {
      return '0'+number;
    } else {
      return number;
    }
  }

  $('.chart__bar--days .chart__bar-number').html(days);
  $('.chart__bar--days').css('height', ((days/360)*100)+'%');
  $('.chart__bar--days .chart__bar-label').html(daysLabel);

  $('.chart__bar--hours .chart__bar-number').html(hours);
  $('.chart__bar--hours').css('height', ((hours/24)*100)+'%');
  $('.chart__bar--hours .chart__bar-label').html(hoursLabel);

  $('.chart__bar--minutes .chart__bar-number').html(minutes);
  $('.chart__bar--minutes').css('height', ((minutes/60)*100)+'%');
  $('.chart__bar--minutes .chart__bar-label').html(minutesLabel);

  $('.chart__bar--seconds .chart__bar-number').html(seconds);
  $('.chart__bar--seconds').css('height', ((seconds/60)*100)+'%');
  $('.chart__bar--seconds .chart__bar-label').html(secondsLabel);
}

timer = setInterval(showRemaining, 1000);


html:

<div class="widget widget--countdown"><div class="widget__foreground">
<div class="widget--countdown__chart">
<div class="chart">
<div class="chart__bar chart__bar--days"><div class="chart__bar-content"><div class="chart__bar-number"></div><div class="chart__bar-label"></div></div></div>
<div class="chart__bar chart__bar--hours"><div class="chart__bar-content"><div class="chart__bar-number"></div><div class="chart__bar-label"></div></div></div>
<div class="chart__bar chart__bar--minutes"><div class="chart__bar-content"><div class="chart__bar-number"></div><div class="chart__bar-label"></div></div></div>
<div class="chart__bar chart__bar--seconds"><div class="chart__bar-content"><div class="chart__bar-number"></div><div class="chart__bar-label"></div></div></div>
</div>
</div>
</div></div>


Стиль не размещаю, но при необходимости добавлю.
Ответить с цитированием
  #2 (permalink)  
Старый 18.07.2016, 19:58
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 568

LADYX, нужен рекурсивный setTimeout, а не setInterval.

Цитата:
Необходимо добавить в скрипт таймера количество месяцев и количество лет.
Чтобы получить кол-во миллисекунд в одном месяце — нужно кол-во миллисекунд в одном дне умножить на кол-во дней в месяце.

Соответственно, чтобы получить кол-во миллисекунд в одном году — нужно кол-во миллисекунд в одном месяце умножить на 12.

Цитата:
Второй момент, не могу разобраться, когда таймер заканчивает отсчет, блок становится пустым. Как сделать так, чтобы по окончании таймера, в этом блоке появлялся другой блок?
if (distance < 0) {
    clearInterval(timer);

    // Вставить другой блок
}


Цитата:
И еще один момент: скрипт ориентирован не на нашего брата, АМ и РМ, не совсем это удобно, возможно ли это изменить, а также поменять местами в первой строке скрипта число и месяц? Очень буду благодарен всем за любую помощь!
Создавай дату по другому.
Ответить с цитированием
  #3 (permalink)  
Старый 26.07.2016, 23:25
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 174

Сделал сам. Всем спасибо. Удачи! Тему можно закрыть.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно реализовать такой функционал? Julian Общие вопросы Javascript 3 16.01.2015 12:34
Как правильно поправить скрипт? Я не программист sergant Общие вопросы Javascript 0 15.11.2013 18:32
как правильно написать скрипт по составлению списков НатальяЯ Общие вопросы Javascript 0 10.09.2012 00:27
Как правильно написать скрипт Estrella Moretti (X)HTML/CSS 3 17.08.2011 15:45
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 23:20