Универсальный таймер
Привет всем.
Я когда то довным довно искал таймер который нашел и все круто было до тех пор пока не задался вопросом нескольких таймеров на странице Есть рабочий образец вот <div id="clockdiv" class="timmer_style"> <div><span class="days"></span><div class="smalltext">Дней</div></div> <div><span class="hours"></span><div class="smalltext">Часов</div></div> <div><span class="minutes"></span><div class="smalltext">Минут</div></div> <div><span class="seconds"></span><div class="smalltext">Секунд</div></div> </div> <script type="text/javascript"> function getTimeRemaining(endtime) { var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24)); return { 'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds }; } function initializeClock(id, endtime) { var clock = document.getElementById(id); var daysSpan = clock.querySelector('.days'); var hoursSpan = clock.querySelector('.hours'); var minutesSpan = clock.querySelector('.minutes'); var secondsSpan = clock.querySelector('.seconds'); function updateClock() { var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ('0' + t.hours).slice(-2); minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); if (t.total <= 0) {clearInterval(timeinterval);} } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = new Date(Date.parse(new Date()) + 900 * 1000); initializeClock('clockdiv', deadline); </script> И теперь встает задача как создать кучу таймеров на одно странице и оповещать сервер о завершении времени одного из таймеров. Я это вижу так таймеры загнать в значение class В главном class таймера передать 2 дополнительных значения (Дата и ключь) Когда скрипт понимает что время таймера закончилось он уведомляет сервер через Ajax какой таймер завершил работу чтобы после принять решения перезаписи HTML таймера или убрать его Что можете посоветовать ? А лучши рабочий образец |
Цитата:
|
2 таймера
<style> .timmer_style { float:left; border:1px solid black; } </style> <div id="clockdiv" class="timmer_style"> <div><span class="days"></span><div class="smalltext">Дней</div></div> <div><span class="hours"></span><div class="smalltext">Часов</div></div> <div><span class="minutes"></span><div class="smalltext">Минут</div></div> <div><span class="seconds"></span><div class="smalltext">Секунд</div></div> </div> <div id="clockdiv1" class="timmer_style"> <div><span class="days"></span><div class="smalltext">Дней</div></div> <div><span class="hours"></span><div class="smalltext">Часов</div></div> <div><span class="minutes"></span><div class="smalltext">Минут</div></div> <div><span class="seconds"></span><div class="smalltext">Секунд</div></div> </div> <script type="text/javascript"> function getTimeRemaining(endtime) { var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24)); return { 'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds }; } function initializeClock(id, endtime) { var clock = document.getElementById(id); var daysSpan = clock.querySelector('.days'); var hoursSpan = clock.querySelector('.hours'); var minutesSpan = clock.querySelector('.minutes'); var secondsSpan = clock.querySelector('.seconds'); function updateClock() { var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ('0' + t.hours).slice(-2); minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); if (t.total <= 0) {clearInterval(timeinterval);} } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = new Date(Date.parse(new Date()) + 900 * 1000); initializeClock('clockdiv', deadline); initializeClock('clockdiv1', new Date(Date.parse(new Date()) + 100 * 1000)); </script> |
Цитата:
А как сделат так чтобы я не так указывал initializeClock('clockdiv1', new Date(Date.parse(new Date()) + 100 * 1000)); А указал Class и у него предположим был пораметр дата и от него понималось что считывать Это выгледит типа <div id="clockdiv" class="timmer_style" data="900"> |
<style> .timer_style { float:left; border:1px solid black; } </style> <div id="clockdiv" class="timer_style" data-stop="900"> <div><span class="days"></span><div class="smalltext">Дней</div></div> <div><span class="hours"></span><div class="smalltext">Часов</div></div> <div><span class="minutes"></span><div class="smalltext">Минут</div></div> <div><span class="seconds"></span><div class="smalltext">Секунд</div></div> </div> <div id="clockdiv1" class="timer_style" data-stop="100"> <div><span class="days"></span><div class="smalltext">Дней</div></div> <div><span class="hours"></span><div class="smalltext">Часов</div></div> <div><span class="minutes"></span><div class="smalltext">Минут</div></div> <div><span class="seconds"></span><div class="smalltext">Секунд</div></div> </div> <script type="text/javascript"> function getTimeRemaining(endtime) { var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24)); return { 'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds }; } function initializeClock(id, endtime) { var clock = document.getElementById(id); var daysSpan = clock.querySelector('.days'); var hoursSpan = clock.querySelector('.hours'); var minutesSpan = clock.querySelector('.minutes'); var secondsSpan = clock.querySelector('.seconds'); function updateClock() { var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ('0' + t.hours).slice(-2); minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); if (t.total <= 0) {clearInterval(timeinterval);} } updateClock(); var timeinterval = setInterval(updateClock, 1000); }; var clocks = document.querySelectorAll('.timer_style'); clocks.forEach(function (elem) { initializeClock(elem.id , new Date(Date.parse(new Date()) + elem.getAttribute('data-stop') * 1000)); }); </script> |
Часовой пояс GMT +3, время: 11:04. |