1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
| <!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta http-equiv="cache-control" content="public, max-age=60">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Daniel Hagnoul">
<title>Test</title>
<style>
progress {
width: 20rem;
}
</style>
<script>
'use strict';
document.addEventListener( 'DOMContentLoaded', ev => {
}, false );
window.addEventListener( 'load', ev => {
const
progressBar = document.querySelector( "progress" ),
outputValue = document.querySelector( "#outputValue" ),
kIntRandom = ( min, max ) => {
// retourne X tel que : min <= X <= max
return Math.floor( Math.random() * ( max - min + 1 ) + min );
};
// generator
function* genFunc(){
for ( let n = 0; n < 10; n++ ){
yield kIntRandom( 0, 100 );
}
}
// iterator
const iterObj = genFunc();
let Obj = iterObj.next();
// animation
function animeProgressBar(){
if ( ! Obj.done ){ // tant que false
// change la valeur
progressBar.value = Obj.value;
outputValue.value = Obj.value + " %";
// il faut ralentir l'action pour voir la progression
setTimeout( () => {
Obj = iterObj.next(); // obj suivant
animeProgressBar(); // appel récursif
}, 1000 ); // 1s
}
}
animeProgressBar();
}, false );
</script>
</head>
<body>
<main>
<progress value="60" max="100"></progress> <output id="outputValue">60 %</output>
</main>
</body>
</html> |
Partager