前期準備

前端框架

你需要準備一些前端框架：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將顯示倒計時器，並開始倒計時。

進度條部分