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

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

скрипт:

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);

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


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

Здравствуйте всем, с помощью добрых людей на этом форуме которые мне помогли, вышел код таймера обратного отсчета!

все прекрасно работает, только в моем случаи я хочу продублировать этот таймер в одном PHP файле, с разным заданным временем.


Для начало я делаю так:

Я вставляю код в php файл от куда буду брать заданное время

PHP
1
$flex = mysql_fetch_assoc(mysql_query("SELECT * FROM `pokupka` WHERE `timers` >= '" . time() . "' AND `name` = 'photos' LIMIT 1;"));
после прописываю

HTML5
1
<span class="day"></span>:<span class="hour"></span>:<span class="min"></span>:<span class="sec"></span>
затем подключаю Javacript


Javascript
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
<script>
        var newDate = <?=$flex['end_timers'];?>*1000;
        timer(); // Инициализация текста в элементах.
        var intervalId = setInterval(timer, 1000);
 
        function timer() {
            var now = Date.now(),
                rest = newDate >= now ? Math.round((newDate - now) / 1000) * 1000 : 0;
            if (!rest)
                clearInterval(intervalId);
 
            var rest2 = rest % 86400000;
            var dd = (rest - rest2) / 86400000;
            rest = rest2;
 
            rest2 = rest % 3600000;
            var hh = (rest - rest2) / 3600000;
            rest = rest2;
 
            rest2 = rest % 60000;
            var mm = (rest - rest2) / 60000;
            rest = rest2;
 
            rest2 = rest % 1000;
            var ss = (rest - rest2) / 1000;
 
            document.querySelector(".day").textContent = (dd < 10 ? "0" : "") + dd;
            document.querySelector(".hour").textContent = (hh < 10 ? "0" : "") + hh;
            document.querySelector(".min").textContent = (mm < 10 ? "0" : "") + mm;
            document.querySelector(".sec").textContent = (ss < 10 ? "0" : "") + ss;
        }
 </script>

на выходе получаю полностью рабочий таймер обратного отсчета, но мне нужно продублировать данный код. После я делаю так:

PHP
1
$flex1 = mysql_fetch_assoc(mysql_query("SELECT * FROM `pokupka` WHERE `timers` >= '" . time() . "' AND `name` = 'photoslive' LIMIT 1;"));
добавляю вторую строку от куда я буду брать второе время для второго таймера, дальше прописываю все то же самое что написал выше, после на выходе получаю 2 таймера обратного отсчета с один и тем же временем, хотя мне нужно что бы отображало две разные времени. Но мне нужно что бы эти два таймера показывали каждый свое время, которого я задавал в самой базе данных.

в Java пробовал дублировать с изменение названия, не помогло, что я сделал не так? подскажите)
Ответ: amr-now, Вообщем спасибо вам большое, все работает как часы, время автоматически берет с базы, и не нужно обновлять все самостоятельно делает, еще раз большое спасибо!
Вопрос: Неправильно работает таймер обратного отсчёта на сайте.

Ребята, есть таймер, который каждый день отсчитывает время (дни, часы, минуты, секунды) до конца дня (до 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 и всё стало нормально. Это не создатель кода дебил, а я дебил

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

Здравствуйте.
Скажите, как сделать Таймер обратного отсчёта на javascript. После того как таймер будет остановлен, выполняется код на php. PHP код с добавлением в базу данных информации - для реализации в браузерная игры. Там сделал здания, после того как пользователь нажмет выполнить действия, система включает таймер отсчета и после того как таймер покажет 0.00 выполняется запись в базу данных, записи результата (пример: добыта железа столько и количество записываем в базу).

Добавлено через 44 минуты
PHP/HTML
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
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="back_counter_container"></div>
        <script type="text/javascript">
            
            var seconds_back_counter = 60;
            
            window.onload = function() {
                
                back_counter_resource = setInterval(function(){
                    
                    if( seconds_back_counter < 0 ) {
                        
                        clearInterval(back_counter_resource);
                        
                        return ;
                    }
                    
                        var days_back_counter = parseInt(seconds_back_counter/(60*60*24));
                    
                       var hours_back_counter = parseInt((seconds_back_counter - days_back_counter*60*60*24)/(60*60));
                    
                     var minutes_back_counter = parseInt((seconds_back_counter - days_back_counter*60*60*24 - hours_back_counter*60*60)/60);
                    
                    var seconds_back_counter_ = parseInt(seconds_back_counter - days_back_counter*60*60*24 - hours_back_counter*60*60 - minutes_back_counter*60);
                    
                    var back_counter_str = days_back_counter + ' days ' + hours_back_counter + ' hours ' + minutes_back_counter + ' minutes ' + seconds_back_counter_ + ' seconds';
                    
                    document.getElementById('back_counter_container').innerHTML = back_counter_str ;
                    
                    seconds_back_counter -- ;
                    
                }, 1000);
            }
        </script>
    </body>
</html>
Данный скрипт отсчета он как раз подходит под задачи. А вот как вписать сюда выполнения кода не понятно. Просьба помочь.
Ответ:
Сообщение от koWAsa
знаете как подключить файл php
а чего его писать-то:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
let requestToServer = new XMLHttpRequest();
requestToServer.open('POST', 'название скрипта обработчика.php', true);
requestToServer.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
requestToServer.send('variable=' + 'например строка');
requestToServer.addEventListener('readystatechange', statusReady);
function statusReady()
{
    if(requestToServer.readyState == 4)
    {
 
    }
}
на стороне сервера в массиве $_POST будет значение строки $_POST['variable'] -> например строка
Вопрос: Как сделать таймер обратного отсчёта по нажатию на кнопку и сделать её неактивной

Снова пишу сюда, ибо нигде больше помощи не дождёшься Мне тут нужно сделать такую штуку: чтобы при нажатии на кнопку сработал таймер обратного отсчёта и кнопка при этом стала неактивной пока таймер не закончит отсчёт. Значение таймера естественно показывается на странице сайта. Я нашёл только, как можно сделать таймер, а вот чтобы с блокировкой кнопки я не догоняю как сделать.
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: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. Апофиг, любой который вернет время
Вопрос: Таймер обратного отсчёта

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

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

Добрый день!
Хочу сделать таймер обратного отсчета.
Время выбирается из select.
Написал такой код, но он не работает,
подскажите пожалуйста )

HTML5
1
2
3
4
5
<select id="minutes">
    <option value="1:00">1 минута</option>
    <option value="2:00">2 минуты</option>
</select>
    <p id="timer"></p>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  window.onload = function startTimer() {
    var my_time = document.getElementById('minutes').value;
 
    var arr = my_time.split(":");
    var m = arr[0];
    var s = arr[1];
    if (s == 0) {
      if (m == 0) {
          alert("Время вышло");
          window.location.reload();
          return;
        }
      m--;
      if (m < 10) m = "0" + m;
      s = 59;
    }
    else s--;
    if (s < 10) s = "0" + s;
    document.getElementById("timer").innerHTML = m+":"+s;
    setTimeout(startTimer, 1000);
  };
Ответ: Скорее при выборе времени функция - запускает интервал и записывает куда-то выбранное время.
А вторая для самого интервала, который берет выбранное время, проверяет сколько прошло, записывает промежуточный результат и т. д.
Вопрос: Как внедрить таймер обратного отсчета на сутки в колесо фортуны?

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