NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Timer

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
davidkostolnak
Člen
Avatar
davidkostolnak:9.4.2017 22:57

Timer
Create a timer animation.
1, The timer in format "00h 00m 00s" with zero opacity translates from the bottom of the page to the center (horizontal & vertical) and as it comes to the center, the opacity animates to 1.
2, The timer counts up with number animation to 05h 00m 00s and starts count down.
3, If a user clicks on the timer, change the timer to a masked input in format "XXh XXm XXs". Submit on enter and update the time if entered correctly.

Javascript

var Datee = new Date();
Datee.setHours(Datee.getHours() + 5);

var s = document.getElementsByTagName('input');
var oneDay = 24 * 60 * 60 * 1000;
var firstDate = Datee;
var secondDate = new Date();
var days = (firstDate.getTime() - secondDate.getTime()) / (oneDay);
var hrs = (days - Math.floor(days)) * 24;
var min = (hrs - Math.floor(hrs)) * 60;

s[0].innerHTML = Math.floor(hrs);
s[1].innerHTML = Math.floor(min);
s[2].innerHTML = Math.floor((min - Math.floor(min)) * 60);
var i = setInterval(function() {n()}, 1000)
function f(d, x) {s[d].innerHTML = x;s[d - 1].innerHTML = Number(s[d - 1].innerHTML) - 1;}
function n() {s[2].innerHTML = Number(s[2].innerHTML) - 1;
    if (s[2].innerHTML == -1) {f(2, 59)
        if (s[1].innerHTML == -1) {f(1, 59)
            if (s[0].innerHTML == -1) {f(0, 23)
            }}}if(s[0].innerHTML <= -1) {clearInterval(i);document.getElementsByTagName('div')[0].innerHTML='<h2>The event is over.</h2>'}}


document.getElementById("demo").addEventListener("click", clickFunction);

function clickFunction() {
    clearInterval(i);

    s[0].innerHTML = "XX";
    s[1].innerHTML = "XX";
    s[2].innerHTML = "XX";
}

document.getElementById('#date').value = Date();

Css

p {
    position: absolute;
    left: 50%;
}
div{

    border: solid 1px black;
    width: 50vw;
}

span{font-size:5vw;
    color:#fff;
    margin:0 1vw;
    padding:2.1vw 2.1vw;
    display:inline-block;
    width:10vw;
    border-radius:10px;
    text-align:center;
    background:rgba(0,0,0,0.75);
    box-shadow:inset 0 -5px 0 rgba(0,0,0,0.5)}


span:after
{font-size:1.5vw;
    display:block;
    margin:3px 0 -1px;
    opacity:.8}

span:nth-of-type(1):after{content:"hrs"}
span:nth-of-type(2):after{content:"min"}
span:nth-of-type(3):after{content:"sec"}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="stylises.css">


</head>
<body>


<input id="date" name="date">
















</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="scriptos.js"></script>
</html>
 
Odpovědět
9.4.2017 22:57
Avatar
davidkostolnak
Člen
Avatar
davidkostolnak:9.4.2017 22:58

Vie mi nikto pomoct ako na to resp. co pouzit aby som dosiahol a splnil zadanie zaujima ma hlavne to zadavanie uzivatelom resp. zmena casovaca ako to urobit za ochotu dakujem

 
Nahoru Odpovědět
9.4.2017 22:58
Avatar
Robert Poč
Člen
Avatar
Robert Poč:12.4.2017 14:49

K zastavení timeru slouží metoda clearInterval(x) kde x = setInterval(.....,
pak si můžeš spustit nový timer s jinou hodnotou.

 
Nahoru Odpovědět
12.4.2017 14:49
Avatar
davidkostolnak
Člen
Avatar
davidkostolnak:12.4.2017 15:48

Jo to ano ale poradit ako spravit to ze na stranke je vykresleny timer nakodene uz mam ze ak nan niekto klikne zastavi sa a prehodi sa tam hodnota XXh XXm XXs no teraz nerozumiem ako spravit to ze ak uzivatel prepise tieto XX na nejaku hodnotu abysa to znovu nastavilo ako timer resp. čo použiť aby sa dany timer dal prepisat a potom sa zacal prepisovat momentalne sa hodnoty vykresluju pomocou <span> je nieco ine co mozem pouzit

 
Nahoru Odpovědět
12.4.2017 15:48
Avatar
Robert Poč
Člen
Avatar
Odpovídá na davidkostolnak
Robert Poč:13.4.2017 9:17

Tak primární dotaz zněl "resp. zmena casovaca", chceš li něco jiného, formuluj dotaz přesně.

<span> neslouži k uživatelskému vstupu na to je https://www.w3schools.com/…ag_input.asp.

 
Nahoru Odpovědět
13.4.2017 9:17
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 5 zpráv z 5.