Barre de compte à rebours progressif

Question

J'essayais de créer un compte à rebours propre avec une barre de progression, j'ai trouvé ce code, je ne suis pas sûr de ce qui semble être le problème. CSS fonctionne très bien. Je suis presque sûr que quelque chose ne va pas avec le code JavaScript.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}

/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
</style>
</head>

<body>
<script>
function progress(timeleft, timetotal, $element) { var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60); if(timeleft > 0) { setTimeout(function() { progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

progress(600, 600, $('#progressBar'));
</script>
<script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progressBar">
  <div class="bar"></div>
</div>
</body>

</html>

Answer 1

Vous devez restructurer votre code. Quelques erreurs ont été trouvées

1.Uncaught ReferenceError: $ n'est pas défini car un lien a été ajouté entre la balise, il doit être ajouté avec l'attribut src.

2.L'argument $ element devient indéfini car le script est ajouté avant le html et ne peut pas obtenir les données requises comme il est appelé lors du chargement de la page, je l'ai donc déplacé vers le bas de la page.

function progress(timeleft, timetotal, $element) { var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60); if(timeleft > 0) { setTimeout(function() { progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

progress(600, 600, $('#progressBar'));

#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}

/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div id="progressBar">
      <div class="bar"></div>
    </div>
</body>
</html>