SKRYPTY COUNTDOWN JAVASCRIPT

HTML

10.09.2017

Najprostszym i najbardziej wygodny odliczanie

HTML

Countdown Clock

Days
Hours
Minutes
Seconds

CSS

body{ text-align: center; background: #00ECB9; font-family: sans-serif; font-weight: 100;
}
h1{ color: #396; font-weight: 100; font-size: 40px; margin: 40px 0px 20px;
}
#clockdiv{ font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px;
}
#clockdiv > div{ padding: 10px; border-radius: 3px; background: #00BF96; display: inline-block;
}
#clockdiv div > span{ padding: 15px; border-radius: 3px; background: #00816A; display: inline-block;
}
.smalltext{ padding-top: 5px; font-size: 16px;
}

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="January 01 2018 00:00:00 GMT+0300"; //for Ukraine
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); // for endless timer
initializeClock('clockdiv', deadline);

Określić datę zakończenia timera

Format wyjściowy jest ISO 8601 data:

var deadline = '2015-12-31';

Skrócony format:

var deadline = '31/12/2015';

Format długa:

var deadline = 'December 31 2015';

data wycofania dokładnego czasu i strefy czasowej:

var deadline="January 01 2018 00:00:00 GMT+0300";

Wnioski Landing zegar - zegar pokaże cały czas, który opuścił 15 dni (można podać dowolny czas)

Czytaj więcej:   TWORZENIE DVD-Video na DVD LAB PRO PROGRAMU

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);

Przykład roboczy Odliczanie

Zobacz Pen Styled JavaScript Countdown Clock przez Denis (@deniscreative) na CodePen.0

Ukryj po zakończeniu timera i wyświetla komunikat, że czas upłynął

To rozwiązanie zaproponowane w komentarzach Igora.

Dodaj blok HTML z komunikatem

Time is up!

Dodanie tych stylów w CSS:

#deadline-messadge{ display: none; font-size: 24px; font-style: italic;
}
#deadline-messadge.visible{ display: block;
}
#clockdiv.hidden{ display: none;
}

W skrypcie zmienić funkcję inicjalizacji timera function initializeClock(id, endtime) {...}, resztę pozostawić w taki sam sposób, jak to było:

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); if (t.total <= 0) { document.getElementById("clockdiv").className = "hidden"; document.getElementById("deadline-messadge").className = "visible"; clearInterval(timeinterval); return true; } 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); } updateClock(); var timeinterval = setInterval(updateClock, 1000);
}

Funkcja ta uległa zmianie jest to, że po upływie czasu, timer jest dodawany do samej klasy .hidden(hide-timer), a wiadomość o końcu czasu wisi klasy .visible(wyświetla komunikat), a także zatrzymać operator wywołania funkcji return true;. A jednostki czasu odstawienia złożone po czasie weryfikacji wygasła lub nie.

Przykład roboczych od minutnik z komunikatem o czasie po

Zobacz Pen Styled JavaScript Countdown zegar z czasów końca messadge przez Denis (@deniscreative) na CodePen.0

Kliknij ponownie uruchomić , aby upewnić się, że wszystko działa zgodnie z oczekiwaniami.

COUNTDOWN TIMER HTML SCRIPT

W swoim artykule na temat usługi I timegenerator.ru Wśród wad tej metody ustalania czasomierza na swojej stronie przydzieliła małą elastyczność w tworzeniu i względną złożoność procesu zmienia datę, do której będzie odliczanie. Wszystkie te problemy są rozwiązane przez zainstalowanie oddzielnej skrypt napisany w JavaScript, aby swojej stronie. Po tym, trzeba tylko podłączyć skrypt do swojej strony internetowej i wkleić kod czasowy połączeń w żądanym miejscu. Pojawienie się takich czasomierzy często będą skonfigurowane w pliku stylu, tak aby zmieniać ich wyświetlanie, trzeba będzie znajomość CSS.

Czytaj więcej:   Windows 7 nie wysyła EXPLORER.EXE

W tym artykule będę krótko mówić o trzech podstawowych skrypty i jak je uruchomić. Wszystkie te skrypty można rozszerzyć za pomocą plików cookies, pętli i innych przydatnych funkcji.


Vassilis Dourdounis jQuery Countdown plugin v1.0

lwtcountdown

Ten skrypt jest początkowo dostępny w 2 wariantach (w jasnej i ciemnej wersji).
Przykład versiiPrimer ciemne wersji światło

Ten scenariusz jest oparty na jQuery ram, więc przed zainstalowaniem skryptu sprawdzanie czy jest on podłączony do tej strony. Jeśli nie, to wstawiony do „głowy” w miejscu (przed ) Kod:

Podłączenie skrypt w poniższym kodzie (jest również w „głowie” na miejscu): W tym przypadku przypomnieć, że wcześniej trzeba przesłać zawartość pliku z timera na gospodarza (w katalogu, który został utworzony, lub po prostu korzenia strona) i przygotować poprawny link do tych plików. Więc jeśli później zegar nie działa, sprawdź linki. Link do pliku jest określony przez odniesienie src = „Plik”.


W ten sposób łączysz wersji light skryptu. Jeśli chcesz ciemne, zamiast linków stylu / main.css w kodzie powyżej, trzeba umieścić Styl / dark.css

Jeżeli po podłączeniu do strony pliku arkusza stylów, to przeszkadzał wygląd witryny, trzeba będzie oczyścić kod w pliku arkusza stylów. W przypadku form pomocy przez styki lub wolny strzelec zamiany (np www.work-zilla.ru).

Następnie, w miejscu, w którym chcesz wstawić odliczanie timera wniosek następujący kod (niezależnie od wybranych tematów skryptu):



недели
0

0



дни
0

0



часы
0

0



минуты
0

>0



секунды
0

0


I w końcu, że musimy dodać do naszego kodu strony dla timera połączeń, która określi termin, w którym do prowadzenia odliczanie i inne opcje, które można przeczytać na oficjalnej stronie skryptu.

Czytaj więcej:   Jak zobaczyć hasło logowania do Google

Kod czasowy połączenia jest następujący:

Wszystkie dane powinny być zastąpione przez które trzeba (dzień, miesiąc, rok, godzina, minuta, sekunda). Następnie trzeba uzyskać licznik działa.
pobierz skrypt

Szczegółowy opis ustawień skryptu jest dostępna w języku angielskim na stronie internetowej dewelopera.

Strona internetowa programu: www.littlewebthings.com/projects/countdown/


Następnie będę dostarcza próbkę skrypty i ustawienie kodu, będzie w stanie zrozumieć, patrząc na kod źródłowy tych przykładów.

proste jcountdown

simple_jQuery_countdown

Wtyczka ta wykorzystuje także biblioteki jQuery, ale początkowo nie miał wizualne uroki, ale ma szeroki wachlarz możliwości funkcjonalnych. Wszystkie ustawienia wizualne można dalej zrobić w pliku stylu.
DemoSkachat skrypt

Osobiście miałem do czynienia z problemem w wyborze zegara na miejscu, kiedy trzeba było zintegrować najprostszy z nich w akcji na stronie. Wszystkie skrypty zostały znalezione mnie z projektowania wizualnego, choć potrzebne tylko najprostsze numery zawarcia. Rozwiązanie zostało znalezione w segmencie anglojęzycznego Internetu, z którego skrypt został pobrany. Przykładem timera można oglądać na stronie internetowej www.tvintel.com.ua w sekcji „Oferty”.

Szczegóły na temat scenariusza i konfiguracji: https://github.com/tomgrohl/jQuery-plugins/tree/master/jcountdown


Martin Angelov jQuery Countdown Plugin

Wtyczka jQuery Countdown

Zbudowany w oparciu o jQuery, piękne i stylowe minutnik. Wartości liczbowe dla timera do wywołania funkcji, które można znaleźć w skryptach.
DemoSkachat skrypt

Szczegóły na temat skryptu: //tutorialzine.com/2011/12/countdown-jquery/


Jeśli nie można ustawić timer na własną rękę, to na pewno widzieli, że praca z kodem dość trudne, a przynajmniej wymaga pewnej wiedzy i praktyki. Jednak zawsze można odwołać się do specjalistów, a oni pomogą Ci na dobre nagrody. W tym przypadku, może być pomoc w instalacji, a także z zegarem do realizacji własnych potrzeb. Oprócz wymiany Freelancing, możesz skontaktować się ze mną bezpośrednio za pośrednictwem formularza kontaktowego. Specjaliści z różnych dziedzin i specjalności znajdują się tutaj:
www.work-zilla.ru



ADAPTIVE COUNTDOWN TIMER


Wybierz swój język

polskiangielski niemiecki hiszpański francuski włoski portugalski turecki arabski ukraiński szwedzki węgierski bułgarski estoński Chiński (uproszczony) wietnamski rumuński tajski słoweński słowacki serbski malajski norweski łotewski litewski koreański japoński indonezyjski hinduski hebrajski fiński grecki holenderski Czech duński chorwacki Chiński (tradycyjny) Filipińska urdu Azeybardzhansky ormiański Białoruski bengalski gruziński kazachski Kataloński mongolski rosyjski Tadzhitsky Tamil'skij telugu Uzbetsky


Dodaj komentarz

Twój e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *