首先說明簡(jiǎn)易版是只有一個(gè) 倒計(jì)時(shí) 和一個(gè) 進(jìn)度條，頁(yè)面加載后自動(dòng)開始計(jì)時(shí)，下次計(jì)時(shí)需要手動(dòng)刷新頁(yè)面。
后續(xù)會(huì)更新實(shí)現(xiàn)完整的倒計(jì)時(shí)功能的文章
前期準(zhǔn)備
-
前端框架
你需要準(zhǔn)備一些前端框架：Bootstrap4 和 jQuery
安裝方法請(qǐng)自行查閱官方文檔或教程-
Bootstrap4：https://v4.bootcss.com/docs/getting-started/download/
-
jQuery：https://www.runoob.com/jquery/jquery-install.html
-
-
保證你的Django項(xiàng)目已經(jīng)配置完畢，包括路由
倒計(jì)時(shí)部分
先上效果圖
（emm...不好意思有點(diǎn)丑...至于這個(gè)進(jìn)度條為什么會(huì)跳，是因?yàn)槲耶?dāng)時(shí)忘記把另一個(gè)方法注釋掉，導(dǎo)致兩個(gè)計(jì)時(shí)方法同時(shí)進(jìn)行，后面的代碼不會(huì)出現(xiàn)這個(gè)錯(cuò)誤）
以下代碼由ChatGPT生成
ChatGPT第一次給的代碼是在視圖函數(shù)里處理時(shí)間，每秒返回一次請(qǐng)求給瀏覽器變更數(shù)字。這導(dǎo)致了瀏覽器反應(yīng)不過來，無法每秒都接受請(qǐng)求并響應(yīng)，因此實(shí)現(xiàn)倒計(jì)時(shí)動(dòng)態(tài)更新需要在JavaScript實(shí)現(xiàn)
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()
# 設(shè)置倒計(jì)時(shí)結(jié)束時(shí)間（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>
配置好就可以看到數(shù)字時(shí)鐘在計(jì)時(shí)了。
嵌入式倒計(jì)時(shí)器
另外，ChatGPT提供了嵌入式倒計(jì)時(shí)器組件方法
在任何模板中都可以使用以下代碼來加載你寫的倒計(jì)時(shí)器：
HTML：
{% url 'countdown' as countdown_url %}
<iframe src="{{ countdown_url }}" width="400" height="200"></iframe>
這將在模板中嵌入一個(gè)iframe元素，并使用countdown視圖函數(shù)的URL作為其源。當(dāng)用戶加載頁(yè)面時(shí)，iframe將顯示倒計(jì)時(shí)器，并開始倒計(jì)時(shí)。
進(jìn)度條部分
HTML：
ChatGPT在html中重寫了CSS以及添加了JS部分代碼，效果十分抽象??這很難評(píng)
原本想實(shí)現(xiàn)一個(gè)環(huán)形進(jìn)度條的倒計(jì)時(shí)組件，因?yàn)樯婕皬?fù)雜的CSS樣式編寫，所以在找到合適的插件之前先用Bootstrap初始的進(jìn)度條樣式
ChatGPT給的代碼只有這部分有用，表示進(jìn)度條的即時(shí)更新
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 + "%");
稍作修改，將進(jìn)度條JS代碼整合到計(jì)時(shí)方法里：
JavaScript：
function updateTimer() {
// 獲取當(dāng)前時(shí)間和倒計(jì)時(shí)結(jié)束時(shí)間
var now = new Date();
var startTime = new Date('{{ start_time|date:"c" }}');
var endTime = new Date('{{ end_time|date:"c" }}');
// 計(jì)算時(shí)間差
var interval = endTime - startTime;
var diff = endTime - now;
// 將時(shí)間差轉(zhuǎn)換為分鐘和秒數(shù)
// 一分鐘等于60000毫秒，Math.floor函數(shù)向下取整
var minutes = Math.floor(diff / 60000);
var seconds = Math.floor((diff % 60000) / 1000);
// 更新頁(yè)面中的時(shí)間顯示
$('#minutes').text(('0' + minutes).slice(-2));
$('#seconds').text(('0' + seconds).slice(-2));
var progress = diff/interval*100;
$(".progress-bar").css("width", progress + "%");
// 在倒計(jì)時(shí)結(jié)束之前，每100毫秒更新一次時(shí)間
if (diff > 0) {
setTimeout(updateTimer, 100);
}
}
$(function () {
// 開始寫 jQuery 代碼...
// 頁(yè)面加載完成后開始倒計(jì)時(shí)
updateTimer();
});
views.py里也要修改countdown函數(shù)
views.py：
def countdown(request):
# 設(shè)置倒計(jì)時(shí)結(jié)束時(shí)間（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)
環(huán)形進(jìn)度條插件
circle-progress-bar.js 是一款利用canvas繪制圓環(huán)進(jìn)度條的插件，不依賴任何庫(kù)。
效果：放大失真、丑
文章來源：http://www.zghlxwxcb.cn/news/detail-411657.html
Bootstrap官網(wǎng)精選模板中的一些模板有環(huán)形進(jìn)度條，可以導(dǎo)入模板后直接使用。文章來源地址http://www.zghlxwxcb.cn/news/detail-411657.html
到了這里，關(guān)于【D01】Django中實(shí)現(xiàn)帶進(jìn)度條的倒計(jì)時(shí)功能（簡(jiǎn)易版）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
