<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <meta name="viewport" content="width=device-width, initial-scale=1.0" > <link rel="shortcut icon" href="./theme/ico/favicon.ico" > <link rel="stylesheet" href="./theme/css/bootstrap.min.css" > <link rel="stylesheet" href="./theme/icons/all-icons.css" type="text/css" media="screen" /> <link rel="stylesheet" href="./theme/fonts/all-fonts.css" type="text/css" media="screen" /> <link rel="stylesheet" href="./theme/css/main.css" > <script src="./theme/js/jquery-3.4.1.min.js" ></script> <script src="./theme/js/popper.min.js" ></script> <script src="./theme/js/bootstrap.min.js" ></script> <meta name="author" content="Piotr Czaja" /> <meta name="keywords" content="projekt repozytorium" /> <meta name="description" content="Odliczanie" /> <title>Odliczanie czasu</title> <script> function startTimer(duration, display) { var timer = duration, minutes, seconds; setInterval(function () { minutes = parseInt(timer / 60, 10); seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (--timer < 0) { document.getElementById("odliczacz").innerHTML = "<h1 class='font-weight-bold'>Czas dobiegł końca.</h1><hr/><p>Proszę o zakończenie pracy.</p></div>" } }, 1000); } window.onload = function () { var fiveMinutes = 60 * 60, display = document.querySelector('#time'); startTimer(fiveMinutes, display); }; </script> </head> <body <div class="container"> <div class="jumbotron mt-3"> <div id="odliczacz"> <h1>Pozostały czas:</h1><hr/> <div class="progress"> <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div> </div> <p class="text-center" style="font-size:600%;"> <span id="time">60:00</span></p> <div class="progress"> <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div> </div> </div></div> </body> </html>