您好,登錄后才能下訂單哦!
這篇文章主要介紹“Django怎么實(shí)現(xiàn)帶進(jìn)度條的倒計(jì)時(shí)功能”,在日常操作中,相信很多人在Django怎么實(shí)現(xiàn)帶進(jìn)度條的倒計(jì)時(shí)功能問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”Django怎么實(shí)現(xiàn)帶進(jìn)度條的倒計(jì)時(shí)功能”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
先上效果圖
以下代碼由ChatGPT生成
ChatGPT第一次給的代碼是在視圖函數(shù)里處理時(shí)間,每秒返回一次請(qǐng)求給瀏覽器變更數(shù)字。這導(dǎo)致了瀏覽器反應(yīng)不過(guò)來(lái),無(wú)法每秒都接受請(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> <h2>Pomodoro Timer</h2> <p>Time remaining: <span id="minutes">25</span>:<span id="seconds">00</span></p> </body> </html>
配置好就可以看到數(shù)字時(shí)鐘在計(jì)時(shí)了。
另外,ChatGPT提供了嵌入式倒計(jì)時(shí)器組件方法
在任何模板中都可以使用以下代碼來(lái)加載你寫(xiě)的倒計(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í)器,并開(kāi)始倒計(jì)時(shí)。
HTML:
ChatGPT在html中重寫(xiě)了CSS以及添加了JS部分代碼,效果十分抽象這很難評(píng)
原本想實(shí)現(xiàn)一個(gè)環(huán)形進(jìn)度條的倒計(jì)時(shí)組件,因?yàn)樯婕皬?fù)雜的CSS樣式編寫(xiě),所以在找到合適的插件之前先用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 () { // 開(kāi)始寫(xiě) jQuery 代碼... // 頁(yè)面加載完成后開(kāi)始倒計(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)
circle-progress-bar.js 是一款利用canvas繪制圓環(huán)進(jìn)度條的插件,不依賴任何庫(kù)。
效果:放大失真、丑
Bootstrap官網(wǎng)精選模板中的一些模板有環(huán)形進(jìn)度條,可以導(dǎo)入模板后直接使用。
到此,關(guān)于“Django怎么實(shí)現(xiàn)帶進(jìn)度條的倒計(jì)時(shí)功能”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。