NOVINKA: Začni v IT jako webmaster s komplexním akreditovaným online kurzem Tvůrce WWW stránek. Zjisti více:
NOVINKA: Staň se datovým analytikem od 0 Kč a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Nejnovější komentáře jsou na konci poslední stránky.
Avatar
David Hartinger
Vlastník
Avatar
David Hartinger:21.1.2014 16:44

Zdravím webové vývojáře! Tento týden si v pravidelné minisoutěži o placku a samolepky naprogramujeme odpočet (countdown) v JavaScriptu. Navrhněte skript, který z následujícího divu:

<div id="odpocet" data-datum="2014-01-27 10:00"></div>

Vytvoří odpočet, který bude zobrazovat zbývající dny, hodiny, minuty a vteřiny do data, předaného v data atributu. Každou vteřinu se samozřejmě hodnota aktualizuje. Snažte se o co nejjednodušší řešení bez použití externích pluginů. Můžete využít čisté jquery. Nejlepší skript bude na devbooku použit k zobrazení zbývajícího času do konce soutěží Machr, tedy pro blaho všech :P

Deadline (ještě bez odpočtu) je v pondělí 27.1. v 10:00

Podrobnější pravidla soutěží naleznete zde: http://www.itnetwork.cz/…outezi-machr

Odpovědět
21.1.2014 16:44
New kid back on the block with a R.I.P
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na David Hartinger
Michal Žůrek - misaz:21.1.2014 17:03

co TypeScript, dovoleno nebo zakázáno?

 
Nahoru Odpovědět
21.1.2014 17:03
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na David Hartinger
Michal Žůrek - misaz:21.1.2014 17:15

proč je odpočet id? to nemůže být na stránce více odpočtů?

 
Nahoru Odpovědět
21.1.2014 17:15
Avatar
Vojtěch Mašek (Woyta)
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Vojtěch Mašek (Woyta):21.1.2014 17:18

Tak udělej funkci se dvěma parametry (el, time).

Nahoru Odpovědět
21.1.2014 17:18
Výraz "to nejde" není v mém slovníku
Avatar
Vojtěch Mašek (Woyta)
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Vojtěch Mašek (Woyta):21.1.2014 17:20

Teda pardon, vlastně s jedním místo žádného...

Nahoru Odpovědět
21.1.2014 17:20
Výraz "to nejde" není v mém slovníku
Avatar
Filip Pýrek
Tvůrce
Avatar
Odpovídá na David Hartinger
Filip Pýrek:21.1.2014 17:23

Má to být tak že si to samo vezme z HTML, nebo se to má přidávat v JS?

Nahoru Odpovědět
21.1.2014 17:23
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Vojtěch Mašek (Woyta)
Michal Žůrek - misaz:21.1.2014 17:31

však já jsem to vyřešil že to funguje bez jakéhokoliv id nebo class :`

 
Nahoru Odpovědět
21.1.2014 17:31
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Michal Žůrek - misaz
David Hartinger:21.1.2014 17:40

Můžeš to v něm klidně napsat, ale pak se to sem asi nevyužije, počítat to budu. Klidně dej místo ID class.

Nahoru Odpovědět
21.1.2014 17:40
New kid back on the block with a R.I.P
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na David Hartinger
Michal Žůrek - misaz:21.1.2014 17:41

proč bys to nemohl využít? TypeScript se překládá do JavaScriptu a funguje pak normálně soubor *.js

 
Nahoru Odpovědět
21.1.2014 17:41
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Filip Pýrek
David Hartinger:21.1.2014 17:42

Nevím jak to myslíš. Vložím 1 řádek se skriptem do hlavičky a zbytek udělá JS.

Nahoru Odpovědět
21.1.2014 17:42
New kid back on the block with a R.I.P
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Michal Žůrek - misaz
David Hartinger:21.1.2014 17:43

Protože se tu chci držet určité množiny technologií.

Nahoru Odpovědět
21.1.2014 17:43
New kid back on the block with a R.I.P
Avatar
Filip Pýrek
Tvůrce
Avatar
Odpovídá na David Hartinger
Filip Pýrek:21.1.2014 17:45

OK, to mi stačí :)

Nahoru Odpovědět
21.1.2014 17:45
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar

Člen
Avatar
:21.1.2014 19:41

Bere se v potaz i vzhled okolo nebo jenom kód?
A ještě edit: sdraco, proč dáváš deadliny v 10:00? Ve škole máme naprosto mizernou wifi a v pondělí se k ní do 10:00 nedostanu :/ A většinou to dělám o přestávkách :(

Editováno 21.1.2014 19:42
 
Nahoru Odpovědět
21.1.2014 19:41
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na
Michal Žůrek - misaz:21.1.2014 19:47

Vy máte ve škole wi-fi? wow, tak to je u nás jen sen.

 
Nahoru Odpovědět
21.1.2014 19:47
Avatar

Člen
Avatar
Odpovídá na Michal Žůrek - misaz
:21.1.2014 19:49

:D No jo, ale to je wifi učitelská, ne pro nás, takže musíme běhat do určitých učeben abysme se na ten net dostali :)
A v naší kořenové třídě chytáme wifi gymplu, co je naproti :D

 
Nahoru Odpovědět
21.1.2014 19:49
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na
Michal Žůrek - misaz:21.1.2014 20:35

vzhled okolo: samozřejmě to můžeš doplnit stylem, ale osobně to dělám tak aby si to každý stylově přizpůsobil sám.

 
Nahoru Odpovědět
21.1.2014 20:35
Avatar
Benjibs
Člen
Avatar
Odpovídá na
Benjibs:21.1.2014 20:42

1 Učitelská Wifi? :O

My máme 4 wifi pre študentov (každé poschodie 1), 2 pre návštevníkov a tuším 2-3 učiteľské :D

Nahoru Odpovědět
21.1.2014 20:42
1 + 1 = 2
Avatar

Člen
Avatar
Odpovídá na Benjibs
:21.1.2014 20:43

No jo, ale pochybuju, že ty chodíš na základku :) A ne, učitelských je asi 5.

 
Nahoru Odpovědět
21.1.2014 20:43
Avatar
Jan Vargovský
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Jan Vargovský:21.1.2014 20:45

Jsi na základce, vždyť každý máte smartphone ... Pak by už ti lidi neuměli nic :)

BTW, to u nás je AP snad v každé učebně. Je pokryto úplně všude :)

Editováno 21.1.2014 20:46
 
Nahoru Odpovědět
21.1.2014 20:45
Avatar
Benjibs
Člen
Avatar
Odpovídá na
Benjibs:21.1.2014 20:48

Naša škola je gympel aj základka dohromady, čiže to majú všetci

Nahoru Odpovědět
21.1.2014 20:48
1 + 1 = 2
Avatar

Člen
Avatar
Odpovídá na Benjibs
:21.1.2014 20:50

Mno... to se máš :)

 
Nahoru Odpovědět
21.1.2014 20:50
Avatar
Benjibs
Člen
Avatar
Odpovídá na
Benjibs:21.1.2014 20:53

Nemám, akorát na základke som bol na škole, kde pomaly nemali ani školské PC ;(

Nahoru Odpovědět
21.1.2014 20:53
1 + 1 = 2
Avatar

Člen
Avatar
Odpovídá na Benjibs
:21.1.2014 21:03

:D tak to je ale zas moc... no, abych byl upřímnej, tahám si do školy USB modem, ale vzhledem k tomu, že je ta škola ze železa (jinak si to nedokážu vysvětlit) mi to leze maximálně 60kb/s :D

 
Nahoru Odpovědět
21.1.2014 21:03
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Jan Vargovský
Michal Žůrek - misaz:21.1.2014 21:05

jenže moji spolužáci neumí nic ani bez wifi (dobře mou na androidu zvládají dobře, to se musí nechat), jeden spolužák (zdůrazňuji v devítce) neumí malou násobilku, řekl nám, že 5/5=5, 3*3=12 na testu už ani mě ani učitele moc nepřekvapuje.

Editováno 21.1.2014 21:05
 
Nahoru Odpovědět
21.1.2014 21:05
Avatar

Člen
Avatar
Odpovídá na Michal Žůrek - misaz
:21.1.2014 21:06

Tak toto je ale moc špatnej případ ;(

 
Nahoru Odpovědět
21.1.2014 21:06
Avatar
Jakub Vaněk (Bubavanek)
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Jakub Vaněk (Bubavanek):21.1.2014 21:08

Tak to bude asi chyba někde v učitelích, že se dostal až do deváté třídy.

 
Nahoru Odpovědět
21.1.2014 21:08
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na
Michal Žůrek - misaz:21.1.2014 21:09

smutné je že není jediný.

Ale celkem dost jsem odbočili od tématu, když tak to někdo někam přesuňte.

 
Nahoru Odpovědět
21.1.2014 21:09
Avatar

Člen
Avatar
Odpovídá na Michal Žůrek - misaz
:21.1.2014 21:11

Ještě odpovím a už s OT přestanu :) U mě to moc nehrozí, protože jsem se (naštěstí) dostal do matematický třídy, a těma příjímačkama by žádnej vůl neprošel. A s ostatníma třídama se moc nestýkám.

 
Nahoru Odpovědět
21.1.2014 21:11
Avatar
Zdeněk Bauer
Tvůrce
Avatar
Zdeněk Bauer:21.1.2014 21:43

Tak to nejspíš mám.
Sice jsem se s tím chvíli páral, ale mělo by to zobrazovat a počítat správně.
Je to na pár řádků, takže pokud to není proti pravidlům, mám to na JSFiddle.
Odkaz: http://jsfiddle.net/…204/J6Kdm/6/

 
Nahoru Odpovědět
21.1.2014 21:43
Avatar
Zdeněk Bauer
Tvůrce
Avatar
Zdeněk Bauer:21.1.2014 21:48

Kdyžtak kdyby to někdo mohl zkontrolovat pro případnou opravdu, protože už mi z toho jde hlava kolem. Jsem asi 3 hodiny řešil jak udělat zbývající hodiny.

 
Nahoru Odpovědět
21.1.2014 21:48
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Zdeněk Bauer
Ondrca:21.1.2014 22:01

Je správně, že se mi tam vypisuje: Nan:Nan ....?

Nahoru Odpovědět
21.1.2014 22:01
Zase jsem o něco chytřejší
Avatar
Zdeněk Bauer
Tvůrce
Avatar
Odpovídá na Ondrca
Zdeněk Bauer:21.1.2014 22:11

To správně není a nevím jak se ti to povedlo, mě to funguje skvěle.

 
Nahoru Odpovědět
21.1.2014 22:11
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na Zdeněk Bauer
Drahomír Hanák:21.1.2014 22:18

YYYY-MM-DD HH:MM není standardní formát data v JavaScriptu. Funguje to dobře v prohlížečích, založených na webkitu. Pro ostatní to musíš ručně parsovat.

 
Nahoru Odpovědět
21.1.2014 22:18
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Zdeněk Bauer
Ondrca:21.1.2014 22:24

Jak říka drahoš tak to asi bude ono - jsem na mozille.

Nahoru Odpovědět
21.1.2014 22:24
Zase jsem o něco chytřejší
Avatar
Zdeněk Bauer
Tvůrce
Avatar
Odpovídá na Drahomír Hanák
Zdeněk Bauer:21.1.2014 22:32

Aha, no fakt, naštěstí do deadline času dost, tak to upravím :(

 
Nahoru Odpovědět
21.1.2014 22:32
Avatar
Zdeněk Bauer
Tvůrce
Avatar
Zdeněk Bauer:21.1.2014 23:10

Tak tady by to mělo být opravený.
Funguje mi to jak na Chromu a FF, tak na IE.
http://jsfiddle.net/…204/J6Kdm/9/

 
Nahoru Odpovědět
21.1.2014 23:10
Avatar
Zdeněk Bauer
Tvůrce
Avatar
Zdeněk Bauer:21.1.2014 23:14

Sakra, omlouvám se za třetí příspěvek v řadě, ale správnej odkaz je toto :(
http://jsfiddle.net/…04/J6Kdm/10/

 
Nahoru Odpovědět
21.1.2014 23:14
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:22.1.2014 1:23

Tak jsem trošku hrábnul do archivu.

http://leteckaposta.cz/150401935

 
Nahoru Odpovědět
22.1.2014 1:23
Avatar
Artas
Tvůrce
Avatar
Artas:22.1.2014 12:21

Ahoj, tady je moje řešení: https://www.dropbox.com/…ountdown.zip

 
Nahoru Odpovědět
22.1.2014 12:21
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:22.1.2014 13:54

jelikož placku na JS nemám, tak já se samozřejmě musím přidat.

Je to "objektové", funguje to automaticky, do HTML si napíšete kam to chcete vložit a nalinkujete ten script (klidně i v hlavičce, načítá to po načtení stránky). Musí to být div, ale nemusí mít žádné id ani class, stačí když bude mít ten data-datum. Pomocí ruguérního výrazu to opravím i tak aby fungoval sdracův zápis. V stránce jich můžete mít kolik chcete.

Donwload: http://misaz.moxo.cz/…coutdown.zip
Online: http://misaz.moxo.cz/…/machr144js/

 
Nahoru Odpovědět
22.1.2014 13:54
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:22.1.2014 14:05

Hezké řešení! :)

Nahoru Odpovědět
22.1.2014 14:05
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:22.1.2014 14:07

Snažil jsem se.

 
Nahoru Odpovědět
22.1.2014 14:07
Avatar

Člen
Avatar
:22.1.2014 15:40

Ahoj, tady je moje první verze: https://www.dropbox.com/…z27/Deiv.zip

 
Nahoru Odpovědět
22.1.2014 15:40
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:22.1.2014 16:07

Také zkusím OOP včetně automatického načítání. Veškerý popis je v souboru countdown.js

http://leteckaposta.cz/449324575

 
Nahoru Odpovědět
22.1.2014 16:07
Avatar
Filip Pýrek
Tvůrce
Avatar
Filip Pýrek:22.1.2014 16:36

Momentálně to vypadá takto: http://jsfiddle.net/4RYNF/
Ci myslíte mám to nechat takto, nebo to mám udělat 9 sekund -> 09 sekund ?

Nahoru Odpovědět
22.1.2014 16:36
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Ondřej Štorc
Tvůrce
Avatar
Odpovídá na Filip Pýrek
Ondřej Štorc:22.1.2014 16:44

Podle mně bude určitě lepší těch 9 sekund..

Nahoru Odpovědět
22.1.2014 16:44
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Filip Pýrek
Michal Žůrek - misaz:22.1.2014 19:47

nemůžeš tam dát normální script, ten minimalizovaný je otřesný.

 
Nahoru Odpovědět
22.1.2014 19:47
Avatar
Benjibs
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Benjibs:22.1.2014 19:49

Ten ho obfuskoval, aby si uchránil svoje štátne tajomstvo ]:>

Nahoru Odpovědět
22.1.2014 19:49
1 + 1 = 2
Avatar
Filip Pýrek
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Filip Pýrek:22.1.2014 20:03

Proč, já neřekl že je to finální verze :) pouze jsem se na něco ptal :D

Nahoru Odpovědět
22.1.2014 20:03
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Petr Gürth
Tvůrce
Avatar
Petr Gürth:24.1.2014 15:14

Ahoj .. taky se připojuji :)
https://dl.dropboxusercontent.com/…ountDown.rar

 
Nahoru Odpovědět
24.1.2014 15:14
Nejnovější komentáře jsou na konci poslední stránky.
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 50 zpráv z 86.