Countdown v JS

JavaScript Základní konstrukce Zdrojákoviště Countdown v JS

Javascriptový odpočet napsaný pro soutěž Machr na JavaScript - CountDown. Lze stylovat do mnoha různých vzhledů, jak do jednoduché věty, tak do pěkného widgetu, protože jednotlivé části mají vlastní třídy, lze tak nastavit vlastní oddělovače, a např. sekundy zobrazit jinou barvou než minuty.

Odpočtů může být na stránce víc. Kód je objektový.

Použití

Do hlavičky stránky stačí vložit odkaz na soubor CountDown.js. Pak libovolnému elementu přiřaď třídu CountDown a parametr data-date obsahující datum ve formátu YYYY-MM-DD HH:MM, případně nepovinně parametry data-notexpired a data-expired určující popisek, který se bude zobrazovat před a po vypršení odpočtu. Element tedy bude vypadat například takto:

<div class="CountDown" data-date="2014-01-27 10:00" data-notexpired="Text před expirací" data-expired="Text po expiraci"></div>

nebo takto:

<div class="CountDown" data-date="2014-01-27 10:00"></div>

Takovýto element se automaticky převede na odpočet, který se bude každou sekundu aktualizovat.

Jednotlivé třídy, které lze použít ke stylování

Třída Význam
expirationLabel Popisek definovaný parametry data-notexpired nebo data-expired
countdowning Samotný odpočet
timePart Část odpočtu, tj. sekundy či minuty či hodiny či dny
secs Část odpočtu, konkrétně sekundy
mins Část odpočtu, konkrétně minuty
hours Část odpočtu, konkrétně hodiny
days Část odpočtu, konkrétně dny
number Číslo části odpočtu
label Popisek části odpočtu
leadingZero Nula přidaná před číslo menší než 10
zero Část odpočtu, která je nulová

Příklady

Pomocí těchto tříd a css lze docílit například následujících vzhledů:

Příklad 1

Ukázka využití odpočtu
.CountDown .leadingZero {
        display: none;
}
.CountDown .number{
        font-size: 200%;
}
.CountDown .timePart{
        margin: 5px 5px 0px 0px;
        float: left;
        width: 60px;
        text-align: center;
}
.CountDown .label{
        display: block;
        color: lightblue;
}
.CountDown {
        font-family: Calibri;
        height: 100px;
}
.CountDown .timePart, .CountDown .expirationLabel{
        background: linear-gradient(to bottom, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
        border-radius: 5px;
        padding: 5px;
        box-shadow: gray 3px 3px 10px;
}
.CountDown .expirationLabel{
        background: linear-gradient(to bottom, rgba(35,83,138,1) 0%,rgba(167,207,223,1) 100%);
        display: block;
        font-size: 150%;
        width: 285px;
}

Příklad 2

Autorem tohoto vzhledu je Salatik.

Ukázka využití odpočtu
.CountDown .timePart, .CountDown .expirationLabel{
        border-radius: 50px;
        display: inline-block;
}
.CountDown img{
        width: 100px;
        height: 100px;
}
.CountDown .timePart{
        width: 100px;
        height: 100px;
}
.CountDown .expirationLabel{
        height: 40px;
}
.CountDown .timePart, .CountDown .expirationLabel{
        margin-right: 10px;
}
.CountDown .leadingZero {
        display: none;
}
.CountDown{
        font-family: Calibri;
        font-size: 50px;
        color: white
}
.CountDown .label{
        display: inline-block;
        width: 30px;
        letter-spacing: 3em;
        overflow: hidden;
}
.CountDown .mins .label{
        width: 40px;
}
.CountDown .secs .label{
        width: 25px;
}
.CountDown *{
        text-align: center;
        vertical-align: bottom;
}
.CountDown .timePart *{
        text-align: center;
        vertical-align: middle;
        line-height: 100px;
}
.CountDown .days{
        background: rgb(32, 170, 210);
}
.CountDown .hours{
        background: rgb(255, 174, 0);
}
.CountDown .mins{
        background: rgb(255, 48, 0);
}
.CountDown .secs{
        background: rgb(91, 50, 146);
}
.CountDown .expirationLabel{
        background: rgb(255, 0, 95);
        padding: 30px 10px 30px 10px;
        font-size: 30px;
}
.CountDown .expirationLabel:empty{
        display: none;
        margin-right: 0px;
}

Galerie

Program byl vytvořen v roce 2014.

 

Stáhnout

Staženo 314x (2.05 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Program pro vás napsal Michal Maršálek
Avatar
Autor se věnuje programování, hře na kytaru a klavír a sledování seriálů. Mezi jeho znalosti v oblasti počítačů patří HTML5, CSS3, Javascript, PHP, SQL, C#, OOP, základy Pythonu, Cinema 4D a Photoshop.

Jak se ti líbí článek?
Celkem (3 hlasů) :
3.666673.666673.666673.66667 3.66667


 



 

 

Komentáře

Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Zdeněk Pavlátka:

U CSS u prvního vzhledu máš špatně kód pro .CountDown .expirationLabel (nejsou zaoblené rohy a zobrazuje se mi menší, než má)
Edit: chyba je jinde, u

.CountDown .timePart, .example4 .expirationLabel{

ti chybí čárka před .expirationLabel -> má to být

.CountDown .timePart, .example4, .expirationLabel{

Pak to funguje.

Editováno 31.1.2014 8:33
Odpovědět 31.1.2014 8:31
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Zdeněk Pavlátka:

Další chyba je u

<div class="CountDown" ...><div>
<div> => </div>
<div class="CountDown" ...></div>

Je to u obou ukázek zápisu.

Editováno 31.1.2014 8:45
Odpovědět 31.1.2014 8:44
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Zdeněk Pavlátka
Michal Maršálek:

Díky za upozornění, ve skutečnosti to má být

.CountDown .timePart, .CountDown , .expirationLabel

A ty divy.... :` :D

 
Odpovědět 31.1.2014 9:52
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovědět 31.1.2014 9:55
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Zdeněk Pavlátka
Michal Maršálek:

Chtěl jsem napsat

.CountDown .timePart, .CountDown .expirationLabel

To jo, ale v tom případě

  1. je tam selektor .example4 zbytečný, protože takovou třídu tam nikde nemáš
  2. všechny selektory částí odpočtu jsou schválně zanořeny v selektoru .CountDown, aby platili skutečně jen na části odpočtu v případě, že bys třeba měl někde jinde stejnou třídu
  3. pokud bys měl odpočtů více a každý s jiným vzhledem, nahradil bys .CountDown třeba #odpocet1
  4. v opačném případě a pokud jsi si jistý, že stejné třídy nepoužiješ někde jinde, můžeš ten selektor .CountDown úplně vymazat.
Editováno 31.1.2014 10:03
 
Odpovědět  +1 31.1.2014 10:01
Avatar
pecina.ondrej:

To JSko je vtip že?

Přetížení onLoad window?

A další chyby, které nemám ani sílu komentovat. Chtělo by si to o JS něco přečíst než to začneš takhle prasit.

Ale jo, říká se kdo umí umí, kdo neumí učí ...

 
Odpovědět  -3 4.2.2014 11:00
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.