Beispiel:JS-WAAPI-1.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">
 <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
 <title>Web Animations 1 - Ladebalken</title>

<style>

  1. ladebalken {
 display: block; 
 background: green; 
 width: 1em;
 height: 1em;
 border: thin solid darkgreen;

} </style> <script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script> <script> 'use strict'; document.addEventListener('DOMContentLoaded', function () { 

 document.querySelector('#interaktiv').addEventListener('click', animiere);

 function animiere() { 
   var ladebalken = document.getElementById('ladebalken');
   ladebalken.animate(
     [
       {
       width: '1em',
       background: 'green'
       }, {
       width: '20em',
       background: 'lime'
       }
     ], {
     duration: 2000,
     iterations: 1,
     fill: 'forwards'
   });
 }

}); </script> </head> <body>

Web Animations - 1
Ladebalken mit element.animate()

Fortschritt: <output id="ladebalken"> </output> 

  <button id="interaktiv">Los!</button>

</body> </html>

Abgerufen am 23.06.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:JS-WAAPI-1.html"