我想要的是让每个所有计时器div根据开始/结束时间获得单独的进度条。
<div class="all-timer">
<div class="start_timer">00:00</div>
<div class="end_timer">23:50</div>
<div id="pg-bar" class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="all-timer">
<div class="start_timer">1:00</div>
<div class="end_timer">20:50</div>
<div id="pg-bar" class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="all-timer">
<div class="start_timer">2:00</div>
<div class="end_timer">21:50</div>
<div id="pg-bar" class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
$(document).ready(function(){
var start_time = $(this).find('.start_timer').html();
var end_time = $(this).find('.end_timer').html();
var start = moment(start_time, 'H:mm');
var end = moment(end_time, 'H:mm');
var formattedPercentage = 0;
var interval = setInterval(function(){
var now = moment();
var percentage = now.diff(start) / end.diff(start) * 100;
if (percentage > 100) {
formattedPercentage = 100;
clearInterval(interval);
} else {
formattedPercentage = percentage.toFixed(2);
}
// Use formattedPercentage as you need
$('#pg-bar .progress-bar').width(formattedPercentage+'%').html(formattedPercentage+'%')
}, 500);
});
代码出了什么问题？(你可以敲我一下(
为什么我的momentjs为第一个div(00:00-23:50(选择并加载progressbar，并在其他两个div的时间不同(即1:00-20:50和2:00-21:50(时为其他两个divs重复相同的百分比。
提前感谢您的时间
JSFiddle演示
您使用相同的名称标识符来获取日期和进度条的domNode。
我为"0"的每一个块给出一个唯一的id；计时器"；，我在jQuery中使用了这个id来获取一个特定的元素，比如开始日期、结束日期和进度条
$(document).ready(function() {
const groups = $('div[id^="time"]');
for (let i = 0; i < groups.length; i++) {
const start_time = $(`#time${i}>.start_timer`).html();
const end_time = $(`#time${i}>.end_timer`).html();
console.log(start_time)
console.log(end_time)
const progress_bar = $(`#time${i}>.progress>.progress-bar`);
const start = moment(start_time, 'H:mm').tz("America/Los_Angeles");
const end = moment(end_time, 'H:mm').tz("America/Los_Angeles");
let formattedPercentage = 0;
const interval = setInterval(function() {
const now = moment().tz("America/Los_Angeles");
const percentage = now.diff(start) / end.diff(start) * 100;
if (percentage > 100) {
formattedPercentage = 100;
clearInterval(interval);
} else {
formattedPercentage = percentage.toFixed(2);
}
progress_bar.width(formattedPercentage + '%').html(formattedPercentage + '%')
}, 500);
}
});<head>
<meta charset="UTF-8">
<title>2016</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data-1970-2030.js"></script>
</head>
<body>
<div id="time0" class="all-timer">
<div class="start_timer">00:00</div>
<div class="end_timer">23:50</div>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div id="time1" class="all-timer">
<div class="start_timer">1:00</div>
<div class="end_timer">20:50</div>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div id="time2" class="all-timer">
<div class="start_timer">2:00</div>
<div class="end_timer">21:50</div>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</body>