首先說明簡易版是只有一個 倒計時 和一個 進度條，頁面載入後自動開始計時，下次計時需要手動刷新頁面。 後續會更新實現完整的倒計時功能的文章 前期準備 前端框架 你需要準備一些前端框架：Bootstrap4 和 jQuery 安裝方法請自行查閱官方文檔或教程 Bootstrap4：https://v4 ...
首先說明簡易版是只有一個 倒計時 和一個 進度條，頁面載入後自動開始計時，下次計時需要手動刷新頁面。
後續會更新實現完整的倒計時功能的文章
前期準備
-
前端框架
你需要準備一些前端框架：Bootstrap4 和 jQuery
安裝方法請自行查閱官方文檔或教程 -
保證你的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部分代碼，效果十分抽象
