CountDown-Progressive Bar
Sep 16 2020
Stavo cercando di creare un conto alla rovescia pulito con una barra di avanzamento, ho trovato questo codice non sono sicuro di quale sia il problema. CSS funziona alla grande Sono abbastanza sicuro che qualcosa non va con il codice 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>Risposte
DeekshaGupta Sep 16 2020 at 15:44
Devi ristrutturare il tuo codice. Sono stati rilevati pochi errori
1.Errore di riferimento non rilevato: $ non è definito perché è stato aggiunto un collegamento tra i tag e dovrebbe essere aggiunto con l'attributo src.
2. L'argomento $ element sta diventando indefinito perché lo script viene aggiunto prima di html e non è in grado di ottenere i dati richiesti poiché viene chiamato al caricamento della pagina, quindi l'ho spostato in fondo alla pagina.
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>