欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Django實現(xiàn)帶進(jìn)度條的倒計時功能詳解

 更新時間:2023年04月13日 08:41:41   作者:stu(dying  
這篇文章主要為大家詳細(xì)介紹了如何利用Django實現(xiàn)簡單的帶進(jìn)度條的倒計時功能,可以在頁面加載后自動開始計時,下次計時需要手動刷新頁面,需要的可以參考一下

前期準(zhǔn)備

前端框架

你需要準(zhǔn)備一些前端框架:Bootstrap4 和 jQuery安裝方法請自行查閱官方文檔或教程

保證你的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)文章

最新評論