CountDown-Progressive Bar

Question

Ich habe versucht, einen sauberen Countdown-Timer mit einem Fortschrittsbalken zu erstellen. Ich habe diesen Code gefunden. Ich bin mir nicht sicher, was das Problem zu sein scheint. CSS funktioniert hervorragend Ich bin mir ziemlich sicher, dass etwas mit dem JavaScript-Code nicht stimmt.

<!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

Sie müssen Ihren Code umstrukturieren. Es wurden nur wenige Fehler gefunden

1.Uncaught ReferenceError: $ ist nicht definiert, da zwischen dem Tag ein Link hinzugefügt wurde, der mit dem src-Attribut hinzugefügt werden soll.

2.Das Argument $ element wird undefiniert, da das Skript vor HTML hinzugefügt wird und die erforderlichen Daten beim Abrufen der Seite nicht abgerufen werden können. Daher habe ich es an den unteren Rand der Seite verschoben.

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>