前期准备

前端框架

你需要准备一些前端框架：Bootstrap4 和 jQuery
安装方法请自行查阅官方文档或教程
- Bootstrap4：https://v4.bootcss.com/docs/getting-started/download/
- jQuery：https://www.runoob.com/jquery/jquery-install.html
保证你的Django项目已经配置完毕，包括路由

倒计时部分

先上效果图

【D01】Django中实现带进度条的倒计时功能（简易版）

（emm...不好意思有点丑...至于这个进度条为什么会跳，是因为我当时忘记把另一个方法注释掉，导致两个计时方法同时进行，后面的代码不会出现这个错误）

以下代码由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>     <h1>Pomodoro Timer</h1>     <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部分代码，效果十分抽象?这很难评

【D01】Django中实现带进度条的倒计时功能（简易版）

原本想实现一个环形进度条的倒计时组件，因为涉及复杂的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)