如何解决(Django - Javascript) html 模板中的计时器 javascript 和 datetime python 变量
我在 javascript 网上找到了一个计时器倒计时，它工作正常......
我必须将 python 变量传递给它，但是，虽然结果是正确的，倒计时没有运行，它显示了正确的剩余时间，但没有继续减少（至少我刷新了页面）...
这是我的一段代码：
- 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>
谢谢大家！
解决方法
试试这个！给定一个 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)
您的 timer_page.html 模板可能如下所示：
<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>
计时器会在此处立即开始，但您可以根据自己的喜好进行调整。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。