[D01]Django中实现带进度条的倒计时功能(简易版)

倒计时和一个 进度条，页面加载后自动开始计时，下次计时需要手动刷新页面。

前期准备

前端框架

Bootstrap4 和 jQuery
安装方法请自行查阅官方文档或教程

jQuery：https://www.runoob.com/jquery/jquery-install.html

倒计时部分

先上效果图

以下代码由ChatGPT生成

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：

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

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

嵌入式倒计时器

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

HTML：

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

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

进度条部分

HTML：

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官网精选模板中的一些模板有环形进度条，可以导入模板后直接使用。

编程笔记 » [D01]Django中实现带进度条的倒计时功能(简易版)