«

Django怎么实现带进度条的倒计时功能

时间:2024-7-13 14:22     作者:韩俊     分类: Python


这篇文章主要介绍“Django怎么实现带进度条的倒计时功能”,在日常操作中,相信很多人在Django怎么实现带进度条的倒计时功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Django怎么实现带进度条的倒计时功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

倒计时部分

先上效果图

以下代码由ChatGPT生成

ChatGPT第一次给的代码是在视图函数里处理时间,每秒返回一次请求给浏览器变更数字。这导致了浏览器反应不过来,无法每秒都接受请求并响应,因此实现倒计时动态更新需要在JavaScript实现

views.py:

import time
from django.shortcuts import render

def countdown(request):
    start_time = int(time.time())
    end_time = start_time + 1500  # 25 minutes in seconds
    while int(time.time()) < end_time:
        time_left = end_time - int(time.time())
        minutes = time_left // 60
        seconds = time_left % 60
        context = {'minutes': minutes, 'seconds': seconds}
        time.sleep(1)
    context = {'minutes': 0, 'seconds': 0}
    return render(request, 'countdown.html', context)

纠正后给的代码:

完整代码

views.py:

from django.shortcuts import render
import datetime

def countdown(request):
    now = datetime.datetime.now()
    # 设置倒计时结束时间(25分钟)
    end_time = now + datetime.timedelta(minutes=25)
    context = {'end_time': end_time}
    return render(request, 'countdown.html', context)

countdown.html:

JavaScript使用jQuery

<!DOCTYPE html>
<html>
  <head>
    <title>Pomodoro Timer</title>
    <meta charset="utf-8">
    <script type="text/javascript">
      function updateTimer() {
          var now = new Date();
          var endTime = new Date('{{ end_time|date:"c" }}');
          var diff = endTime - now;
          var minutes = Math.floor(diff / 60000);
          var seconds = Math.floor((diff % 60000) / 1000);

          $('#minutes').text(('0' + minutes).slice(-2));
          $('#seconds').text(('0' + seconds).slice(-2));

          if (diff > 0) {
            setTimeout(updateTimer, 1000);
          }
      }

    $(document).ready(function() {
          updateTimer();
    });

    </script>
  </head>
  <body>
    <h2>Pomodoro Timer</h2>
    <p>Time remaining: <span id="minutes">25</span>:<span id="seconds">00</span></p>
  </body>
</html>

配置好就可以看到数字时钟在计时了。

嵌入式倒计时器

另外,ChatGPT提供了嵌入式倒计时器组件方法

在任何模板中都可以使用以下代码来加载你写的倒计时器:

HTML:

{% url 'countdown' as countdown_url %}
<iframe src="{{ countdown_url }}" width="400" height="200"></iframe>

这将在模板中嵌入一个iframe元素,并使用countdown视图函数的URL作为其源。当用户加载页面时,iframe将显示倒计时器,并开始倒计时。

进度条部分

HTML:

ChatGPT在html中重写了CSS以及添加了JS部分代码,效果十分抽象这很难评

原本想实现一个环形进度条的倒计时组件,因为涉及复杂的CSS样式编写,所以在找到合适的插件之前先用Bootstrap初始的进度条样式

ChatGPT给的代码只有这部分有用,表示进度条的即时更新

html:

<div class="progress">
    <div class="progress-bar" role="progressbar"></div>
</div>

JavaScript:

var progress = 100 - ((timeRemaining / 60) * 100) / 60;
$(".progress-bar").css("width", progress + "%");

稍作修改,将进度条JS代码整合到计时方法里:

JavaScript:

  function updateTimer() {
    // 获取当前时间和倒计时结束时间
    var now = new Date();
    var startTime = new Date('{{ start_time|date:"c" }}');
    var endTime = new Date('{{ end_time|date:"c" }}');
    // 计算时间差
    var interval = endTime - startTime;
    var diff = endTime - now;

    // 将时间差转换为分钟和秒数
    // 一分钟等于60000毫秒,Math.floor函数向下取整
    var minutes = Math.floor(diff / 60000);
    var seconds = Math.floor((diff % 60000) / 1000);
    // 更新页面中的时间显示
    $('#minutes').text(('0' + minutes).slice(-2));
    $('#seconds').text(('0' + seconds).slice(-2));

    var progress = diff/interval*100;
    $(".progress-bar").css("width", progress + "%");

    // 在倒计时结束之前,每100毫秒更新一次时间
    if (diff > 0) {
      setTimeout(updateTimer, 100);
    }
  }

  $(function () {
    // 开始写 jQuery 代码...
    // 页面加载完成后开始倒计时
    updateTimer();
  });

views.py里也要修改countdown函数

views.py:

def countdown(request):
    # 设置倒计时结束时间(25分钟)
    start_time = datetime.datetime.now()
    end_time = start_time + datetime.timedelta(minutes=0.2)
    context = {
        'start_time': start_time,
        'end_time': end_time
    }
    return render(request, 'countdown.html', context)

环形进度条插件

circle-progress-bar.js 是一款利用canvas绘制圆环进度条的插件,不依赖任何库。

效果:放大失真、丑

Bootstrap官网精选模板中的一些模板有环形进度条,可以导入模板后直接使用。

标签: python

热门推荐