prosty stoper w JS

0

Jeszcze jeden mini projekt. Zrobiłem sobie stoper, który odlicza czas do zakończenia przerwy. Wykorzystuję to podczas prezentacji i szkoleń. Docelowo dodam jeszcze jakiś slideshow z obrazkami reklamowymi, ale skupmy się na mechanice.

Kod JS:

// sekcja zegar
let komunikat = document.getElementById("komunikat");
let minutnik = document.getElementById("minutnik");

// sekcja ustawienia
let ustawienia = document.getElementById("ustawienia");
let czas = document.getElementById("czas");
let minuty = 0;
let sekundy = 0;

// dodatkowe flagi
let praca = false;
let ustaw = false; 

// przycisk Ustaw
document.getElementById("ustaw").onclick = function() 
{ 
    minuty = czas.value;
    if ((minuty >=1) && (minuty <=60))
    {
        ustaw = true;
        document.getElementById("start").disabled = false;
    }
    else
    {
        alert("Wpisz poprawną wartość z zakresu 1-60 minut");
        minuty = 0;
    }
};

// przycisk Start
document.getElementById("start").onclick = function() { if (ustaw == true) {praca = true;}; };
document.getElementById("start").disabled = true;

// główna funkcja
document.onload = odliczanie();

function odliczanie()
{  
    if ((praca) && (ustaw))
    { 
        ustawienia.style.display = "none";
        wyswietl_czas();
        sekundy--;
        sprawdz_sekundy();
    }
    else
    {
        wyswietl_czas();
    }
    setTimeout(odliczanie, 100);
};

// wyświetlanie czasu
function wyswietl_czas()
{
    if (minuty < 10)
    {
        if (sekundy < 10)
        {
            minutnik.textContent = "0" + minuty + ":0" + sekundy;
        }
        else
        {
            minutnik.textContent = "0" + minuty + ":" + sekundy;
        }
    }
    else
    {
        if (sekundy < 10)
        {
            minutnik.textContent = minuty + ":0" + sekundy;
        }
        else
        {
            minutnik.textContent = minuty + ":" + sekundy;
        }
    }
}

// funkcja przskakująca z 0 na 59 lub czy jest koniec odliczania
function sprawdz_sekundy()
{
    if ((sekundy == 0) && (minuty <= 0))
    {
        koniec();
    }

    if (sekundy <= 0)
    {
        sekundy = 59;
        minuty--;
    }
}

// koniec odliczania - wyświetlanie komunikatu
function koniec()
{   
    praca = false;
    komunikat.style.color = "red";
    komunikat.style.fontWeight = 600;
    komunikat.textContent = "Koniec przerwy! Zapraszamy do stanowisk!";
    minutnik.style.display = "none";
}

A tutaj HTML jak by ktoś chciał u siebie przetestować:

<!DOCTYPE html>
<html lang="pl">

	<head>
		<meta charset="utf-8">
		<script src="przerwa.js" defer></script>
	</head>

	<style>
		body
		{
			text-align: center;
		}
		input[type = button]
		{
			width: 100px;
		}
		#zegar
		{
			margin-top: 20vh;
		}
		#komunikat, #minutnik
		{
			font-size: 42px;

		}
		#minutnik
		{
			color: red;
		}
	</style>

	<body>
		<div id = "zegar">
			<p id = "komunikat">Do zakończenia przerwy pozostało:</p>
			<p id = "minutnik"></p>
		</div>
		<div id = "ustawienia">
			<input type = "number" id = "czas" min = "1" max = "60">
			<br><br>
			<input type = "button" id = "ustaw" value = "Ustaw">
			<input type = "button" id = "start" value = "Start">
		</div>
	</body>
	
</html>

Być może uznacie, że przekombinowałem z blokowaniem przycisków. Ale to pomińmy, bardziej "czystość" kodu JS mnie interesuje. Widzę też, że funkcję wyswietl_czas() mozna by uprościć "ubierając" fragment kodu w postaci innej funkcji.

0

Strasznie krótkie muszą być te przerwy, jeżeli używasz tego stopera ;)

2

Kod jest do bólu stanowy. Ciężko się połapać, co robi. Na przykład mamy:

ustaw = true;

I trzeba szukać po kodzie, jaki to będzie miało efekt.

Do tego w sprawach czasowych nie zakładaj, że setTimeout będzie dokładny. W każdej iteracji możesz stracić milisekundę czy dwie i po dłuzszym czasie wynik będzie niedokładny. Użyj Date, zapisz sobie, kiedy proces się zaczął i porównuj ze stanem obecnym.

Do formatowania czasu możesz użyć https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

Poza tym zarzuty jak w poprzednim kodzie, polskie nazwy, snake case i brak addEventListener.

0

Więc jeszcze raz zapytam: jeżeli do przycisku chcę przypisać tylko jedną akcję i nic więcej, to jaka to różnica czy użyję addEventListener czy onclick?

0
kosmonauta80 napisał(a):

Więc jeszcze raz zapytam: jeżeli do przycisku chcę przypisać tylko jedną akcję i nic więcej, to jaka to różnica czy użyję addEventListener czy onclick?

Przeważnie żadna o ile nie masz przy tym potrzeby sterowania kolejnością łapania zdarzeń przypisanych do przycisku i ew. któregoś z jego kontenerów.

Więc przy czymś prostym nie będącym częścią czegoś większego nie ma z tym problemu.

0

Kod jest do bólu stanowy.

Czy to wada? Co złego jest w tym, że poszczególne akcje rozbijam na funkcje, które wywołuje w odpowiednim momencie? Jak inaczej - konceptualnie - to można jeszcze zrobić?

0

Rozbijać na funkcje możesz, byle powiązania między nimi były jasne. Najlepiej to żeby timer się odpalał przy kliknięciu, a nie że sobie tym sterujesz przez zmienne globalne. A jak się skończy to clearTimeout.

1 użytkowników online, w tym zalogowanych: 0, gości: 1