NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
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.