Countdown v JS

Javascriptový odpočet napísaný pre súťaž Machr na JavaScript - Countdown. Možno stylovať do mnohých rôznych vzhľadov, ako do jednoduchej vety, tak do pekného widgetu, pretože jednotlivé časti majú vlastné triedy, možno tak nastaviť vlastné oddeľovače, a napr. Sekundy zobraziť inou farbou ako minúty.

Odpočtov môže byť na stránke viac. Kód je objektový.

Použitie

Do hlavičky stránky stačí vložiť odkaz na súbor CountDown.js. Potom ľubovoľnému elementu priraď triedu Countdown a parameter data-date obsahujúce dátum vo formáte YYYY-MM-DD HH: MM, prípadne nepovinné parametre data-notexpired a dáta-expired určujúci popis, ktorý sa bude zobrazovať pred a po vypršaní odpočtu. Element teda bude vyzerať napríklad takto:

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

alebo takto:

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

Takýto element sa automaticky prevedie na odpočet, ktorý sa bude každú sekundu aktualizovať.

Jednotlivé triedy, ktoré možno použiť na štýlovanie

Pomocou týchto tried a css možno docieliť napríklad nasledujúcich vzhľadov:

Príklad 1

.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;
}

Príklad 2

Autorom tohto vzhľadu je Salatik.

.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;
}

Galéria