Beispiel:WAI-ARIA-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> 

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Countdown-Timer mit ARIA Live Regions</title> <script> document.addEventListener('DOMContentLoaded', function() { 

 let countdownInterval;
 const clock = document.querySelector('#clock');
 const alertMessage = document.querySelector('#alert');
 const alertSelect = document.querySelector('#alertSelect');
 const setButton = document.querySelector('#set');
 const stopButton = document.querySelector('#stop');
 
 let countdownTime = 0;
 let isTimerRunning = false;

 // Function to format time (in milliseconds) to minutes and seconds
 function formatTime(ms) {
   const minutes = Math.floor(ms / 60000);
   const seconds = Math.floor((ms % 60000) / 1000);
   return `${minutes}:${seconds < 10 ? '0' : }${seconds}`;
 }

 // Start countdown timer
 function startCountdown(duration) {
   const endTime = Date.now() + duration;
   isTimerRunning = true;

   countdownInterval = setInterval(() => {
     const remainingTime = endTime - Date.now();
     if (remainingTime <= 0) {
       clearInterval(countdownInterval);
       clock.textContent = '0:00';
       alertMessage.textContent = 'Fertig! Endlich Pause!';
       alertMessage.setAttribute('role', 'alert');
       isTimerRunning = false;
     } else {
       clock.textContent = formatTime(remainingTime);
     }
   }, 1000);
 }

 setButton.addEventListener('click', () => {
   if (isTimerRunning) return; // Prevent multiple timers from running

   countdownTime = parseInt(alertSelect.value, 10);
   alertMessage.textContent = 'Timer zählt bis ' + formatTime(countdownTime);
   startCountdown(countdownTime);
 });

 stopButton.addEventListener('click', () => {
   clearInterval(countdownInterval);
   clock.textContent = '0:00';
   alertMessage.textContent = 'Timer gestoppt.';
   isTimerRunning = false;
 });

}); </script> <style> [role=alert] { font-size: 1.25em; font-weight: bold; color: red; border-left: thick solid; padding-left: 1em; } </style> </head>

<body>

Countdown-Timer mit ARIA Live Regions

verbleibende Zeit: <output id="clock" aria-live="assertive"></output>

<fieldset aria-controls="alerts"> <legend>Gleich gibt's ne Pause …</legend>

<label for="alertSelect">Weck' mich in:</label> <select id="alertSelect" role="listbox"> <option value="10000" selected>10 Sekunden</option> <option value="60000">1 Minute</option> <option value="120000">2 Minuten</option> <option value="300000">5 Minuten</option> </select>

<button id="set">Start!</button> <button id="stop">Stop!</button> </fieldset>

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:WAI-ARIA-2.html&oldid=99645“