I've found a timer countdown in javascript online and it works fine...
I have to pass python variable to it but, although the result is correct, the countdown doesn't run, it shows the correct remaining time but doesn't continue to decrease (at least I refresh the page)...
These are my piece of codes:
views.py
import datetime
auction = Auction.objects.get(id=id)
endDateFormat = auction.endDate.strftime("%Y-%m-%dT%H:%M:%S")
startDateFormat = datetime.datetime.now().strftime("%Y-%m-%dT%H:%M:%S")
template.html
<script>
// Set the date we're counting down to
var countDownDate = new Date("{{endDateFormat}}").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date("{{startDateFormat}}").getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
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);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
Thanks to everyone!
Try this! Given a view:
def timer_page_view(request):
auction = Auction.objects.last()
context = {
'start_date': auction.start_date.strftime("%Y-%m-%dT%H:%M:%S"),
'end_date': auction.end_date.strftime("%Y-%m-%dT%H:%M:%S"),
}
return render(request, 'timer_page.html', context=context)
Your timer_page.html template could look like this:
<body>
<p>start date is {{ start_date }}</p>
<p>start date is {{ end_date }}</p>
<div id='demo'>time difference</div>
</body>
<script>
// Set the date we are counting to
var countDownDate = new Date('{{ end_date }}');
// Set the date we are counting from
var countFromDate = new Date("{{ start_date }}");
// Set inital distance in seconds
var distance = (countDownDate.getTime() - countFromDate.getTime()) / 1000;
// Set initial time difference in the DOM
var days = Math.floor((distance / (60 * 60 * 24)));
var hours = Math.floor((distance - (days * (60 * 60 * 24))) / (60 * 60));
var minutes = Math.floor((distance - ((days * (60 * 60 * 24)) + (hours * (60 * 60)))) / 60);
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + ' ' + hours + ' ' + minutes + ' ' + seconds;
// Timer
let active = true;
startTimer = () => {
if (active) {
var timer = document.getElementById("demo").innerHTML;
let nums = timer.split(" ").map(num => parseInt(num))
let day = nums[0];
let hour = nums[1];
let min = nums[2];
let sec = nums[3];
if (sec == 0) {
if (min == 0) {
hour--;
min = 59;
if (hour == 0){
day--;
hour = 23;
}
if (hour < 10) hour = "0" + hour;
} else {
min--;
}
if (min < 10) min = "0" + min;
sec = 59;
} else {
sec--;
console.log(sec)
if (sec < 10) sec = "0" + sec;
}
document.getElementById("demo").innerHTML = day + ' ' + hour + ' ' + min + ' ' + sec;
setTimeout(startTimer, 1000);
}
}
startTimer();
</script>
The timer would start immediately here, but you can play around with that to your liking.
Related
I am trying to get the date to change to second date. On the first date, I would like it to show Starts: in bold and then the remaining time. I have it figured to change to a second date. When it changes to the second date, i want it to show Ends: in bold then the remaining time. When both countdown timers end, I want it to display text saying the event has ended. Here is what I have so far.
<script>
// Set the date we're counting down to
var countDownDate = new Date("July 23, 2020 21:07:00").getTime();
var countDownDate2 = new Date("July 23, 2020 21:08:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
var distance2 = countDownDate2 - now;
var a;
if (distance < 0 && distance2 >0) {
a = distance2;
} else {
a = distance;
}
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(a / (1000 * 60 * 60 * 24));
var hours = Math.floor((a % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((a % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((a % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = "Starts: " + days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// Change to another exp.
if (distance < 0 && distance2 >0) {
function changeDate() {
a = distance2;
}
}
// If the count down is over, write some text
if (distance2 < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}}, 1000);
</script>
It seems you basically have it figured out, if I'm understanding the question. You just need another variable for the Start/End label, and then use it when you set .innerHTML of the demo element.
<div id="demo"></div>
<script>
// Set the date we're counting down to
//var countDownDate = new Date("July 23, 2020 21:07:00").getTime();
var countDownDate = Date.now() + 5000; // using a shorter time for testing purposes;
// var countDownDate2 = new Date("July 23, 2020 21:08:00").getTime();
var countDownDate2 = Date.now() + 10000;
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
var distance2 = countDownDate2 - now;
var a;
var label = 'Starts: ';
if (distance < 0 && distance2 >0) {
a = distance2;
label = 'Ends: ';
} else {
a = distance;
}
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(a / (1000 * 60 * 60 * 24));
var hours = Math.floor((a % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((a % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((a % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = "<strong>" + label + "</strong>" + days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// Change to another exp.
if (distance < 0 && distance2 >0) {
function changeDate() {
a = distance2;
}
}
// If the count down is over, write some text
if (distance2 < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}}, 1000);
</script>
I have requirement if countdown timer in my project so I am using code for that but that code showing 24 hrs format but i want 12 hours format with AM or PM should show instead of 13,14,15 I want hours should come like this
1:00 PM,2:00 PM,3:00 PM.any idea how to do this ?
<p id="check_time"></p>
<p id="check_hours"></p>
<script>
var countDownDate = new Date("may 17, 2018 01:37:25").getTime(); //this the which i have to count for difference
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - 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);
document.getElementById("check_hours").innerHTML = hours;
document.getElementById("check_time").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
Try the following:
var countDownDate = new Date("june 17, 2018 01:37:25").getTime(); //this the which i have to count for difference
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - 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);
var n = new Date();
var h = n.getHours() < 10 ? '0' + n.getHours() : n.getHours();
var min = n.getMinutes() < 10 ? '0' + n.getMinutes() : n.getMinutes();
var sec = h < 10 ? '0' + n.getSeconds() : n.getSeconds();
var time = n.getHours() + ':' + min + ':' + sec;
document.getElementById("check_hours").innerHTML = tConvert(time);
document.getElementById("check_time").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
function tConvert (time) {
// Check correct time format and split into components
time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];
if (time.length > 1) { // If time format correct
time = time.slice (1); // Remove full string match value
time[5] = +time[0] < 12 ? ' AM' : ' PM'; // Set AM/PM
time[0] = +time[0] % 12 || 12; // Adjust hours
}
return time.join (''); // return adjusted time or original string
}
<p id="check_time"></p>
<p id="check_hours"></p>
<p id="demo"></p>
I'm using the following JavaScript for a countdown timer and it has been working great in most browsers, I've just double checked Internet Explorer however and I am getting 'NaN' displayed in place of each number.
Can anyone help to explain where this goes wrong in IE not seeing the individual variables as a number?
// Set the date we're counting down to
var countDownDate = new Date("2018-05-25 12:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
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 (days.toString().length < 2) {
days = "0" + days;
}
if (hours.toString().length < 2) {
hours = "0" + hours;
}
if (minutes.toString().length < 2) {
minutes = "0" + minutes;
}
if (seconds.toString().length < 2) {
seconds = "0" + seconds;
}
// Display the result in the element with id="countdown"
document.getElementById("countdown").innerHTML = days + " : " + hours + " : " +
minutes + " : " + seconds;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "<a href='/register'>Countdown Expired</a>";
}
}, 1000);
<span id="countdown"></span>
MDN discourages the use of a string in the date constructor because not all browsers implement this the same way.
If you do want to use date strings, I would recommend using a third party library like momentjs to parse these strings to make sure this works in every browser.
Just normalise the date and time
function getNormalisedDatetime(dString) { // yyyy-mm-dd hh:mm:ss
var parts = dString.split(" ");
var dParts = parts[0].split("-");
var tParts = parts[1].split(":");
return new Date(dParts[0],dParts[1]-1,dParts[2],tParts[0],tParts[1],tParts[2]);
}
function pad(num) {
return ("0"+num).slice(-2);
}
// Set the date we're counting down to
var countDownDate = getNormalisedDatetime("2018-05-25 12:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
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);
// Display the result in the element with id="countdown"
document.getElementById("countdown").innerHTML = "" + pad(days) + " : " + pad(hours) + " : " +
pad(minutes) + " : " + pad(seconds);
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "<a href='/register'>Countdown Expired</a>";
}
}, 1000);
<span id="countdown"></span>
Each time while loop run it create another table row and show related data, i want to show countdown timer in column of each row(to show time elapsing). My below script run only once. Do you have another idea how to do it or do something with this?? i wrote below code within the php while loop but runs only once. Please help
<script>
counter=0;
</script>
<?php
$count=0;
while($rowp = $resultp->fetch_assoc()) {
echo <td><p id='demo",$count,"'></p></td>
?>
<script>
var countDownDate = new Date("<?php echo $enterytime1; ?>").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = now - countDownDate;
// Time calculations for days, hours, minutes and seconds
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);
// Output the result in an element with id="demo"
document.getElementById("demo" + counter).innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<?php }
?>
yes you have to create new countdown for all column
Probably your if condition is true - countDownDate > now - and it terminates interval.
I am guessing it goes directly to EXPIRED right? You have the wrong order. It should be the other way around:
var distance = countDownDate - now;
I replaced the php code to the date and i changed the distance calculation. Try this if there is any change then let me know
var countDownDate = new Date(2017, 2, 10, 12, 9, 40, 0).getTime();
counter = 0;
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
// Time calculations for days, hours, minutes and seconds
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);
counter++;
// Output the result in an element with id="demo"
var newDiv = document.createElement("div");
newDiv.setAttribute("id", "demo" + counter);
var node = document.createTextNode(days + "days " + hours + "h " + minutes + "m " + seconds + "s ");
newDiv.appendChild(node);
if (document.getElementById("demo" + counter) != null) {
document.getElementById("demo" + counter).innerHTML = days + "days " + hours + "h " + minutes + "m " + seconds + "s ";
} else {
document.body.appendChild(newDiv);
}
if (counter > 10)
counter = 0;
}, 1000);
div {
border: 1px black solid;
}
<div id='demo'></div>
I have already tried many scripts, but result is not coming as required.
<script>
// Set the date we're counting down to
//var countDownDate = new Date("<?php echo $final_date; ?>").getTime();
var countDownDate = new Date("<?php echo $final_date; ?>").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
//var now = new Date().getTime();
//alert(now);
var offset = -7;
var get = new Date( new Date().getTime() + offset * 3600 * 1000).toUTCString().replace( / GMT$/, "" );
var now = new Date(get).getTime();
//alert(now);
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
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);
// Output the result in an element with id="demo"
if(days == '0'){
document.getElementById("demo").innerHTML = hours + "hours "
+ minutes + "minutes " + seconds + "seconds ";
} else if(hours == '0') {
document.getElementById("demo").innerHTML = minutes + "minutes " + seconds + "seconds ";
} else if(minutes == '0') {
document.getElementById("demo").innerHTML = seconds + "seconds ";
} else if(seconds == '0') {
document.getElementById("demo").innerHTML = "";
} else {
document.getElementById("demo").innerHTML = days + "days " + hours + "hours "
+ minutes + "minutes " + seconds + "seconds ";
}
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "expired";
}
}, 1000);
</script>