How to implement countdown timer in django
I just need a general idea. I'm developing a sports application in django. This application needs to measure time and display it to the user. During countdown I also need to perform some "action" which might occur. This means call another view according to a type of action, mark this action and redirect back to original view with timer where the user now can see the change. I suppose I can't implement countdown on server-side(django). I have to do this with JavaScript, but... the countdown stops everytime user performs an action. Do I have to use AJAX for this? Is't there a better way to achieve this. Thanks
Answer
model.py
class chek(models.Model):
date = models.DateTimeField(auto_now_add=False, blank=True, null=True)
views.py
def jaya(request):
ob=chek.objects.get(id=2)
return render(request,'jaya.html',{'ob':ob})
use script like this
<script>
function makeTimer() {
var endTime=new Date({{ ob.date|date:"U" }} * 1000);
endTime = (Date.parse(endTime) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var timeLeft = endTime - now;
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
$("#days").html(days + "<span>Days</span>");
$("#hours").html(hours + "<span>Hours</span>");
$("#minutes").html(minutes + "<span>Minutes</span>");
$("#seconds").html(seconds + "<span>Seconds</span>");
}
setInterval(function() { makeTimer(); }, 1000);
</script>
html body
<body class="game_info" data-spy="scroll" data-target=".header">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="row">
<div class="full">
<div class="right-match-time">
<h2>Next Match</h2>
<ul id="countdown-1" class="countdown">
<li><span id="days"></span>Day </li>
<li><span id="hours"></span>Hours </li>
<li><span id="minutes"></span>Minutes </li>
<li><span id="seconds"></span>Seconds </li>
</ul>
</div>
</div>
</div>
</div>
</div>