I have these below function for countdown.
$.fn.countdown = function(toTime, callback){
let $el = $(this);
var intervalId;
intervalId = setInterval(function() {
var now = new Date().getTime();
var distance = toTime - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if(distance < 0){
clearInterval(intervalId);
if (typeof callback == 'function'){
callback.call(this);
}
}
else{
var value = days + "<sup>d</sup> " + (hours > 9 ? hours : '0' + hours) + ":" + (minutes > 9 ? minutes : '0' + minutes) + ":" + (seconds > 9 ? seconds : '0' + seconds);
$el.html(value);
}
}, 1000);
};
var date1 = new Date();
date1.setSeconds(date1.getSeconds() + 5);
var date2 = new Date();
date2.setSeconds(date2.getSeconds() + 7);
$('#my_div').countdown(date1.getTime(), () =>{
var id = $(this).attr("id");
console.log(id);
$.ajax({
url: "set",
type: "POST",
data:{
id: id
},
dataType: "JSON",
success: function (jsonStr){
}
});
});
$('#my_div2').countdown(date2.getTime(), () =>{
var id = $(this).attr("id");
console.log(id);
$.ajax({
url: "set",
type: "POST",
data:{
id: id
},
dataType: "JSON",
success: function (jsonStr){
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my_div" data-id="1"></div>
<div id="my_div2" data-id="2"></div>The counting is working good. Now I need to get data-id after the countdown finish. But getting value undefined.
Also I need to print text Counting Done to each div my_div and my_div2. Something think like below:
$('#my_div').countdown(new Date("Jun 23, 2022 22:37:25").getTime(), function(){
callback: function() {
$(this).text("Counting Done");
}
});
My question is:
data-id for each div countdown?