Django實現(xiàn)帶進(jìn)度條的倒計時功能詳解
前期準(zhǔn)備
前端框架
你需要準(zhǔn)備一些前端框架:Bootstrap4 和 jQuery安裝方法請自行查閱官方文檔或教程
- Bootstrap4:https://v4.bootcss.com/docs/getting-started/download/
- jQuery:https://www.runoob.com/jquery/jquery-install.html
保證你的Django項目已經(jīng)配置完畢,包括路由
倒計時部分
先上效果圖
(emm...不好意思有點(diǎn)丑...至于這個進(jìn)度條為什么會跳,是因為我當(dāng)時忘記把另一個方法注釋掉,導(dǎo)致兩個計時方法同時進(jìn)行,后面的代碼不會出現(xiàn)這個錯誤)
以下代碼由ChatGPT生成
ChatGPT第一次給的代碼是在視圖函數(shù)里處理時間,每秒返回一次請求給瀏覽器變更數(shù)字。這導(dǎo)致了瀏覽器反應(yīng)不過來,無法每秒都接受請求并響應(yīng),因此實現(xiàn)倒計時動態(tài)更新需要在JavaScript實現(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è)置倒計時結(jié)束時間(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ù)字時鐘在計時了。
嵌入式倒計時器
另外,ChatGPT提供了嵌入式倒計時器組件方法
在任何模板中都可以使用以下代碼來加載你寫的倒計時器:
HTML:
{% url 'countdown' as countdown_url %} <iframe src="{{ countdown_url }}" width="400" height="200"></iframe>
這將在模板中嵌入一個iframe元素,并使用countdown視圖函數(shù)的URL作為其源。當(dāng)用戶加載頁面時,iframe將顯示倒計時器,并開始倒計時。
進(jìn)度條部分
HTML:
ChatGPT在html中重寫了CSS以及添加了JS部分代碼,效果十分抽象這很難評
原本想實現(xiàn)一個環(huán)形進(jìn)度條的倒計時組件,因為涉及復(fù)雜的CSS樣式編寫,所以在找到合適的插件之前先用Bootstrap初始的進(jìn)度條樣式
ChatGPT給的代碼只有這部分有用,表示進(jìn)度條的即時更新
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代碼整合到計時方法里:
JavaScript:
function updateTimer() { // 獲取當(dāng)前時間和倒計時結(jié)束時間 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; // 將時間差轉(zhuǎn)換為分鐘和秒數(shù) // 一分鐘等于60000毫秒,Math.floor函數(shù)向下取整 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 + "%"); // 在倒計時結(jié)束之前,每100毫秒更新一次時間 if (diff > 0) { setTimeout(updateTimer, 100); } } $(function () { // 開始寫 jQuery 代碼... // 頁面加載完成后開始倒計時 updateTimer(); });
views.py里也要修改countdown函數(shù)
views.py:
def countdown(request): # 設(shè)置倒計時結(jié)束時間(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)度條的插件,不依賴任何庫。
效果:放大失真、丑
Bootstrap官網(wǎng)精選模板中的一些模板有環(huán)形進(jìn)度條,可以導(dǎo)入模板后直接使用。
到此這篇關(guān)于Django實現(xiàn)帶進(jìn)度條的倒計時功能詳解的文章就介紹到這了,更多相關(guān)Django帶進(jìn)度條的倒計時內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Python中數(shù)據(jù)類轉(zhuǎn)換為JSON的方法詳解
這篇文章主要介紹了Python中數(shù)據(jù)類轉(zhuǎn)換為JSON的方法詳解的相關(guān)資料,需要的朋友可以參考下2023-09-09Pycharm無法打開雙擊沒反應(yīng)的問題及解決方案
這篇文章主要介紹了Pycharm無法打開,雙擊沒反應(yīng),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08關(guān)于TensorFlow新舊版本函數(shù)接口變化詳解
今天小編就為大家分享一篇關(guān)于TensorFlow新舊版本函數(shù)接口變化詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-02-02Python學(xué)習(xí)之魔法函數(shù)(filter,map,reduce)詳解
這篇文章我們將來學(xué)習(xí)一下,Python中的三個高級函數(shù):filter()、map()、reduce(),這三個函數(shù)也被稱為魔法函數(shù),感興趣的小伙伴可以了解一下2022-04-04Python 的 sum() Pythonic 的求和方法詳細(xì)
Python 的內(nèi)置函數(shù)sum()是一種對數(shù)值列表求和的有效且Pythonic 的方法。將多個數(shù)字相加是許多計算中常見的中間步驟,因此sum()對于 Python 程序員來說是一個非常方便的工具。下面文章就讓我們一起來看具體內(nèi)容吧2021-10-10python 實現(xiàn)長數(shù)據(jù)完整打印方案
這篇文章主要介紹了python 實現(xiàn)長數(shù)據(jù)完整打印方案,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2021-03-03kafka-python批量發(fā)送數(shù)據(jù)的實例
今天小編就為大家分享一篇kafka-python批量發(fā)送數(shù)據(jù)的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-12-12