如何在同一个 DOM 元素上实现多个倒计时
how to implement multiple countdowns on the same DOM element
我有一个 DOM 元素,它包含来自我的数据库的值(毫秒),我想为这些值实现倒计时。例如,我可以在一个部分中有 4 个产品交易,具有不同的持续时间(以毫秒为单位),我想根据每个交易的持续时间动态创建不同的倒计时 (HH:mm:ss)。
目前,持续时间值(毫秒)存储在该部分中每笔交易的隐藏输入字段中。
<input type="hidden" name="" id='duration' value="{{this.deals.duration}}">
我尝试过的方法(仅适用于一项产品交易)。期间我使用了 moment.js
。还有这里的倒计时:
<script type="text/javascript">
$(document).ready(function(){
console.log($('#duration').val());
var interval = 1000;
var durations = $('#duration').val();
setInterval(function(){
durations = moment.duration(durations - interval, 'milliseconds');
// console.log(durations);
$('#countdown').text(durations.hours() + ":" + durations.minutes() + ":" + durations.seconds())
}, interval);
})
</script>
非常感谢:)
$(document).ready(function(){
var interval = 1000;
setInterval(function(){
$('.duration').each(function () {
var t = Number($(this).val()) - interval;
if (t>=0) {
var d = moment.duration(t, 'milliseconds');
$(this).next('.countdown').text([
String(d.hours()).padStart(2,'0'),
String(d.minutes()).padStart(2,'0'),
String(d.seconds()).padStart(2,'0')
].join(':'));
$(this).val(t);
}
});
}, interval);
})
input + span {
display: block;
}
<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.24.0/moment-with-locales.min.js"></script>
<input type="hidden" name="a" class='duration' value="5000"><span class="countdown"></span>
<input type="hidden" name="b" class='duration' value="15000"><span class="countdown"></span>
<input type="hidden" name="c" class='duration' value="20000"><span class="countdown"></span>
要为这个问题添加另一个答案...
无依赖性(jQuery、Moment.js)且仅持续 24 小时(不计算天、月、年)。
function countDown(elClass) {
let labels = document.querySelectorAll(elClass);
let now = Date.now();
labels.forEach((label,key) => {
let duration = document.getElementById(label.getAttribute('for')).value;
if(duration <= 86400000) {
let futureDate = now + parseInt(duration);
let counterInterval = setInterval(() => {
let diff = futureDate - Date.now();
if(diff <= 0) {
clearInterval(counterInterval);
return;
}
if(diff > 0) {
let milliseconds = diff%1000;
let seconds = parseInt(diff/1000)%60;
let minutes = parseInt(diff/(60*1000))%60;
let hours = parseInt(diff/(60*60*1000))%24;
label.innerHTML = hours.toString().padStart(2, '0')+':'+minutes.toString().padStart(2, '0')+':'+seconds.toString().padStart(2, '0')+'<br>';
}
},1000);
}
});
}
countDown('.countdown');
<input type="hidden" name="a" id="a" class='duration' value="5000"><label for="a" class="countdown"></label>
<input type="hidden" name="b" id="b" class='duration' value="15000"><label for="b" class="countdown"></label>
<input type="hidden" name="c" id="c" class='duration' value="190000"><label for="c" class="countdown"></label>
<input type="hidden" name="d" id="d" class='duration' value="2003200"><label for="d" class="countdown"></label>
<input type="hidden" name="e" id="e" class='duration' value="20067100"><label for="e" class="countdown"></label>
<input type="hidden" name="f" id="f" class='duration' value="86023104"><label for="f" class="countdown"></label>
我有一个 DOM 元素,它包含来自我的数据库的值(毫秒),我想为这些值实现倒计时。例如,我可以在一个部分中有 4 个产品交易,具有不同的持续时间(以毫秒为单位),我想根据每个交易的持续时间动态创建不同的倒计时 (HH:mm:ss)。 目前,持续时间值(毫秒)存储在该部分中每笔交易的隐藏输入字段中。
<input type="hidden" name="" id='duration' value="{{this.deals.duration}}">
我尝试过的方法(仅适用于一项产品交易)。期间我使用了 moment.js
。还有这里的倒计时:
<script type="text/javascript">
$(document).ready(function(){
console.log($('#duration').val());
var interval = 1000;
var durations = $('#duration').val();
setInterval(function(){
durations = moment.duration(durations - interval, 'milliseconds');
// console.log(durations);
$('#countdown').text(durations.hours() + ":" + durations.minutes() + ":" + durations.seconds())
}, interval);
})
</script>
非常感谢:)
$(document).ready(function(){
var interval = 1000;
setInterval(function(){
$('.duration').each(function () {
var t = Number($(this).val()) - interval;
if (t>=0) {
var d = moment.duration(t, 'milliseconds');
$(this).next('.countdown').text([
String(d.hours()).padStart(2,'0'),
String(d.minutes()).padStart(2,'0'),
String(d.seconds()).padStart(2,'0')
].join(':'));
$(this).val(t);
}
});
}, interval);
})
input + span {
display: block;
}
<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.24.0/moment-with-locales.min.js"></script>
<input type="hidden" name="a" class='duration' value="5000"><span class="countdown"></span>
<input type="hidden" name="b" class='duration' value="15000"><span class="countdown"></span>
<input type="hidden" name="c" class='duration' value="20000"><span class="countdown"></span>
要为这个问题添加另一个答案...
无依赖性(jQuery、Moment.js)且仅持续 24 小时(不计算天、月、年)。
function countDown(elClass) {
let labels = document.querySelectorAll(elClass);
let now = Date.now();
labels.forEach((label,key) => {
let duration = document.getElementById(label.getAttribute('for')).value;
if(duration <= 86400000) {
let futureDate = now + parseInt(duration);
let counterInterval = setInterval(() => {
let diff = futureDate - Date.now();
if(diff <= 0) {
clearInterval(counterInterval);
return;
}
if(diff > 0) {
let milliseconds = diff%1000;
let seconds = parseInt(diff/1000)%60;
let minutes = parseInt(diff/(60*1000))%60;
let hours = parseInt(diff/(60*60*1000))%24;
label.innerHTML = hours.toString().padStart(2, '0')+':'+minutes.toString().padStart(2, '0')+':'+seconds.toString().padStart(2, '0')+'<br>';
}
},1000);
}
});
}
countDown('.countdown');
<input type="hidden" name="a" id="a" class='duration' value="5000"><label for="a" class="countdown"></label>
<input type="hidden" name="b" id="b" class='duration' value="15000"><label for="b" class="countdown"></label>
<input type="hidden" name="c" id="c" class='duration' value="190000"><label for="c" class="countdown"></label>
<input type="hidden" name="d" id="d" class='duration' value="2003200"><label for="d" class="countdown"></label>
<input type="hidden" name="e" id="e" class='duration' value="20067100"><label for="e" class="countdown"></label>
<input type="hidden" name="f" id="f" class='duration' value="86023104"><label for="f" class="countdown"></label>