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.