Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как правильно внести изменения в скрипт таймера обратного отсчета времени?

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

скрипт:

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>


Стиль не размещаю, но при необходимости добавлю.
Ответ: LADYX, нужен рекурсивный setTimeout, а не setInterval.

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

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

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

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


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

Снова пишу сюда, ибо нигде больше помощи не дождёшься Мне тут нужно сделать такую штуку: чтобы при нажатии на кнопку сработал таймер обратного отсчёта и кнопка при этом стала неактивной пока таймер не закончит отсчёт. Значение таймера естественно показывается на странице сайта. Я нашёл только, как можно сделать таймер, а вот чтобы с блокировкой кнопки я не догоняю как сделать.
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
    function timer(){
 
        var hour = document.getElementById('hour').innerHTML;
        var minute = document.getElementById('minute').innerHTML;
        var second = document.getElementById('second').innerHTML;
        var end = false;
         
        if( second > 0 ) second--;
        else{
            second = 60;
             
            if( minute > 0 ) minute--;
            else{
                second = 60;
                 
                if( hour > 0 ) hour--;
                else end = true;
            }
        }
 
        if(end){
            clearInterval(intervalID);
            alert("Таймер сработал!");
        }else{
            document.getElementById('hour').innerHTML = hour;
            document.getElementById('minute').innerHTML = minute;
            document.getElementById('second').innerHTML = second;
        }
    }
    window.intervalID = setInterval(timer, 1000);
}
</script>
</head>
<body>
 
    <div id="timer">
        <div id="hour">10</div>&nbsp;:
        <div id="minute">00</div>&nbsp;:
        <div id="second">00</div>
    </div>
 
</body>
Ответ: Спасибо за варианты Буду пробовать
Вопрос: Неправильно работает таймер обратного отсчёта на сайте.

Ребята, есть таймер, который каждый день отсчитывает время (дни, часы, минуты, секунды) до конца дня (до 00 часов). Вот его код:
function two(a) {
    return (9 < a ? "" : "0") + a
}

function formatTime(a) {
    a = Math.floor(a / 1E3);
    var b = Math.floor(a / 60),
        c = Math.floor(b / 60),
        d = c / 24 | 0,
        c = c % 24;
    a %= 60;
    b %= 60;
	a = Math.abs(a);
	b = Math.abs(b);
	c = Math.abs(c);
  return two(d)  + " "  + " " + two(c) + " "  + " " + two(b) + " "  + " " + two(a) + " " 
};

function Time() {
    var data = Date.parse('01/1/2016') // дата начала 1 шестидневки  строго "месяц/день/год"
    data = new Date(data)
    for (; (new Date).getTime() > data; )  {
    data.setDate(data.getDate()+1)
    }
    var a = data, m = -360 - a.getTimezoneOffset();
    a.setMinutes(m, 0, 0);
    var a = a.getTime() -  (new Date).getTime();
    document.getElementById("showtime").innerHTML = formatTime(a);
    window.setTimeout(Time, 1E3)
};
Time()


Соответственно, на странице элементы с ID = showtime превращаются в таймер обратного отсчёта.

ПРОБЛЕМА в том, что таймер доходит до нуля в 22:00 а потом цифры уходят в минус. Вот так это выглядит:

В 00:00 таймер сбрасывается и начинает отсчитывать С 22 ЧАСОВ. Т.е. сдвиг 2 часа. Как это исправить?
Код писал не я, а какой-то криворукий дебил. Уже много косяков исправил, но с таймером разобраться не могу.
Ответ:
Сообщение от рони
R45HeR,

строка 36
Пасиба. Исправил -360 на -180 и всё стало нормально. Это не создатель кода дебил, а я дебил

Ну хорошо хоть себе его не присвоил)
Вопрос: Таймер обратного отсчёта

Доброго времени суток.
Нужен таймер обратного отсчёта, а именно таймер запускается по кнопке, 20 сек, если в течение этого времени была нажать кнопка ешё раз, то таймер перезапускается опять на исходные 20 сек. причём без перезагрузки страницы. В тоже время если кнопка не была нажата за это время то таймер останавливается и функция прекращает своё выполнение
Ответ: Спасибо большое

Добавлено через 2 минуты
а ещё можно вопросик, а как этот код взаимодействовать с php тобишь мне надо чтобы выводило имена пользователей, которые нажали на кнопку (имена записаны в $_SESSION['login']). это т.е. ajax надо с php обработчиком? и как сделать чтобы пока кнопка не нажата у неё value было одно, после нажатия другое, а если уже 20 сек проходит,то не алерт выскакивает, а кнопка также меняет значение
Вопрос: Таймер обратного отсчёта до наступления события

Здравствуйте! Вот нашёл в инете код таймера обратного отсчёта "До Нового Года осталось..."
Я ещё не сильно умею во всём этом разбираться. Помогите, пожалуйста мне его настроить.
Я уже понял, как изменить дату. А как изменить время? Ну, чтобы Новый Год у меня наступил не в 00:00, а, например, в 19:20.
И ещё. А как сделать так, чтобы после того, как таймер дойдёт до нужного времени, открылась скрытая картинка?

ActionScript 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var now:Date = new Date(); // поточная дата
var endDate:Date = new Date(now.getFullYear()+01,0,1); // дата события
var countdownTimer:Timer = new Timer(1000); // таймер
 
countdownTimer.addEventListener(TimerEvent.TIMER, updateTime);
countdownTimer.start();
 
function updateTime(e:TimerEvent):void {
    now = new Date(); // обновляем поточную дату
    if(now.getTime()>endDate.getTime()){ // если сейчас дата больше за дату события
        //c_countdoun.count.text = "00:00:00:00"; // уррра новый год)))
        c_countdoun.countD.text = "000";
        c_countdoun.countH.text = "00";
        c_countdoun.countM.text = "00";
        c_countdoun.countS.text = "00";
        countdownTimer.stop();
        
        return;
    }
    var timeLeft:Number = endDate.getTime() - now.getTime();// общее время в милисекундах
    var seconds:Number = Math.floor(timeLeft / 1000); // секунды
    var minutes:Number = Math.floor(seconds / 60); // минуты
    var hours:Number = Math.floor(minutes / 60);  // часы
    var days:Number = Math.floor(hours / 24); //дни
    seconds %= 60; // % - это остача от деления
    minutes %= 60;
    hours %= 24;
    
    var sec:String = seconds.toString();
    var min:String = minutes.toString();
    var hrs:String = hours.toString();
    var day:String = days.toString();
    
    // если число одноцифровое то добавляем 0 спереди
    if (sec.length < 2) {
            sec = "0" + sec;
    }
    if (min.length < 2) {
            min = "0" + min;
    }
    if (hrs.length < 2) {
            hrs = "0" + hrs;
    }
    if (day.length < 2) {
            day = "0" + day;
    }
    
    // выводим результаты как одну строчку или по отдельности
    //var time:String = day + ":" + hrs + ":" + min + ":" + sec;
    //c_countdoun.count.text = time;
    c_countdoun.countD.text = day;
    c_countdoun.countH.text = hrs;
    c_countdoun.countM.text = min;
    c_countdoun.countS.text = sec;
}
Ответ: О! Понятно! Огромное спасибо!
Вопрос: Таймер обратного отсчета до события

Приветствую , помогите пожалуйста составить скрипт самого обычного таймера обратного отсчета например До события осталось: 1 дней 2 часов 30 минут 50 секунд , и еще если возможно сделать чтобы таймер работал без разницы в часовых поясах . Спасибо
Ответ: Да, еще надо не забыть учесть поправку на время ожидания ответа от сервера...
В общем если от сервера получать то главный вопрос встает, что это за сервер?
1. Свой
2. Не свой но какой-то конкретный и есть протокол общения с ним
3. Апофиг, любой который вернет время
Вопрос: Как внедрить таймер обратного отсчета на сутки в колесо фортуны?

Всем привет. Подскажите как внедрить таймер обратного отсчета в игру колесо фортуны. На сутки нужно... Сама игра по адресу . Код открыт можно просмотреть свободно.
В данный момент при нажатии на кнопку "крутить" после остановки результата кнопка становится неактивна, но если обновить страницу, то крутить снова можно. Как это можно сделать таймером на кэше хотябы.. Чтобы вход не воспроизводить.. Кэш или ограничение попыток по айпи адресу.. Но так чтобы на сутки. Крутить можно 1 раз в сутки.. Всем спасибо кто неравнодушен!
Ответ: Deff, эх если бы я еще понимал как это сделать(
Вопрос: Помогите добить таймер обратного отсчета.

Привет всем помогите добить скрипт

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<?php

	date_default_timezone_set('Europe/Kiev');//timzone
/**
1|text|link|12|10|2018|10:00:00|09:55:00|10:30:00|  
2|text|link|12|10|2018|21:00:00|20:55:00|21:30:00|  
3|text|link|12|10|2018|22:00:00|21:55:00|22:30:00| 
*/
    $data =  file("time_table.dat");
	
	foreach($data as $rows) {

		$elem = explode("|", $rows);
		if (!strripos($rows, "|")) continue;

///////////////////////////////////////////////////////////////

?>

<script type="text/javascript">

var countDownDate = new Date("<?=$elem[3].','.$elem[4].','.$elem[5].','.$elem[7];?>").getTime();//до открытия ссылки 
//var countDownDate = new Date("<?=$elem[3].','.$elem[4].','.$elem[5].','.$elem[8];?>").getTime();// до закрытия ссылки 
var x = setInterval(function() {

    var now = new Date().getTime();

    var distance = countDownDate - now;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);


    document.getElementById("demo_<?=$elem[0];?>").innerHTML = days + ":" +  hours + ":" + minutes + ":" + seconds + "<br> <a href=\"#\">Неактивная</a>"; 

    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo_<?=$elem[0];?>").innerHTML = "<a href=\"<?=$elem[2];?>\">Активная</a>";
		//window.location = "final.php" // по окончанию времени перейти на другу страницу
    }
}, 1000);

/**время беру из переменной через фореч из файла , работает только по последней строке,
 тоесть выводит лиш один результат,  помогите чтоб показать несколько таймеров обратного отсчета и прикрутить таймер до закрытия ссылки и */

</script>

<?		 

		 
echo'<table border="1" align="center" cellpadding="0" cellspacing="0" width="300">

	<tr>
		<td valign="top" align="center"  width="150">
        '.$elem[3].'/'.$elem[4].'/'.$elem[5].'-'.$elem[6].'<br>
		'.$elem[1].'
		</td>
		<td valign="top" align="center"  width="150">
		<span id="demo_'.$elem[0].'"></span>
		</td>
	</tr>
</table>';
	}

?>
Ответ:
Сообщение от bridun
Nexus, я учусь и для себя делаю
Учитесь не, простите, говно писать, а нормальные, поддерживаемые вещи.
Толку больше будет, будете сразу знать как сделать лучше, а не как "быстрее".
Быстрота в конечном итоге приведет к тому, что код однажды придется переписать полностью, поскольку поддерживать эту хрень даже вам через год будет в тягость.
Вопрос: Реализовать таймер обратного отсчета с миллисекундами

Здравствуйте! Подскажите пожалуйста, как можно реализовать таймер обратного отсчета, не только с указанием минут и секунд, но и с указанием миллисекунд. Заранее благодарю.
Ответ:
 Комментарий администратора Taatshi
kalabuni, Padimanskas, мне ваши разборки надоели. В следующий раз оба пойдете в бан на месяц. Последнее предупреждение.


Тема почищена.
Вопрос: простой таймер обратного отсчета

Помогите сделать на странице таймер обратного отсчёта, чтобы видно было как он отсчитывает 200 сек, а затем перешел по ссылке
Ответ: спасибо! то что нужно!!!!