【问题标题】:How to implement countdown timer in django如何在 django 中实现倒数计时器
【发布时间】:2012-05-15 14:55:05
【问题描述】:

我只需要一个大致的想法。 我正在用 django 开发一个运动应用程序。此应用程序需要测量时间并将其显示给用户。在倒计时期间,我还需要执行一些可能发生的“动作”。这意味着根据一种操作调用另一个视图,标记此操作并使用计时器重定向回原始视图,用户现在可以在其中看到更改。 我想我无法在服务器端(django)上实现倒计时。我必须使用 JavaScript 来执行此操作,但是……每次用户执行操作时,倒计时都会停止。我必须为此使用 AJAX 吗?有没有更好的方法来实现这一点。谢谢

【问题讨论】:

  • 你有一些我们可以看到的示例代码吗?你可以在 javascript 中做你想做的事。
  • 对不起,这个问题写得不好,但正如我所写,我只需要大致了解如何实现这一目标

标签: ajax django countdown


【解决方案1】:

模型.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})

使用这样的脚本

<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 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>

【讨论】:

    【解决方案2】:

    您肯定需要一些 javascript 来执行倒数计时器。喜欢这个 - http://keith-wood.name/countdown.html

    然后发生任何操作,您可以对您的 django URL(view) 进行基本的 ajax 调用,以更新数据库中的任何值或您需要对请求执行的任何其他操作。

    当倒计时停止时,您可能可以将一些剩余时间值记录到 django 中,然后当您需要继续计时器时,您可以再次对某个视图进行 ajax 调用,这将返回您开始倒计时的时间你可以用剩下的时间重建你的倒数计时器。

    【讨论】:

    • 当然,这正是我在dooz.in 实现的,所以分享一下我所做的吧。
    • 我可以只通过 Django 使用相同的技巧,例如使用 celery 或线程吗?如果可以,请给我一个解释这个技巧的来源,因为我找不到?
    猜你喜欢
    • 1970-01-01
    • 2016-07-21
    • 2012-05-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多