【D01】Django中完成带进度条的倒计时功用（简易版）
首要阐明简易版是只要一个 倒计时 和一个 进度条，页面加载后主动开端计时，下次计时需求手动改写页面。
后续会更新完成完好的倒计时功用的文章
前期预备
-
前端结构
你需求预备一些前端结构：Bootstrap4 和 jQuery
装置办法请自行查阅官方文档或教程-
Bootstrap4：https://v4.bootcss.com/docs/getting-started/download/
-
jQuery：https://www.runoob.com/jquery/jquery-install.html
-
-
确保你的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部分代码，作用非常笼统🙂这很难评
原本想完成一个环形进度条的倒计时组件，由于触及杂乱的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官网精选模板中的一些模板有环形进度条，能够导入模板后直接运用。
