CountDown-Progressive Bar

Question

Tôi đang cố gắng tạo đồng hồ đếm ngược sạch sẽ với thanh tiến trình, tôi đã nghĩ ra mã này, tôi không chắc có vẻ như là sự cố. CSS đang hoạt động tốt. Tôi khá chắc chắn có điều gì đó không ổn với mã 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

Bạn cần phải cấu trúc lại mã của mình. Có một số lỗi được tìm thấy

1.Uncaught ReferenceError: $ không được xác định vì liên kết đã được thêm vào giữa thẻ, nó sẽ được thêm vào với thuộc tính src.

2. Đối số $ element đang không được xác định vì script được thêm vào trước html và không thể lấy dữ liệu cần thiết vì nó được gọi khi tải trang, vì vậy tôi đã chuyển nó xuống cuối trang.

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>