首先说明简易版是只有一个 倒计时 和一个 进度条，页面加载后自动开始计时，下次计时需要手动刷新页面。

后续会更新实现完整的倒计时功能的文章

前期准备

  1. 前端框架

    你需要准备一些前端框架：Bootstrap4 和 jQuery

    安装方法请自行查阅官方文档或教程

  2. 保证你的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部分代码，效果十分抽象这很难评

原本想实现一个环形进度条的倒计时组件，因为涉及复杂的CSS样式编写，所以在找到合适的插件之前先用Bootstrap初始的进度条样式

ChatGPT给的代码只有这部分有用，表示进度条的即时更新

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 + "%");

稍作修改，将进度条JS代码整合到计时方法里：

JavaScript：

  function updateTimer() {

    // 获取当前时间和倒计时结束时间

    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;

    // 将时间差转换为分钟和秒数

    // 一分钟等于60000毫秒，Math.floor函数向下取整

    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 + "%");

    // 在倒计时结束之前，每100毫秒更新一次时间

    if (diff > 0) {

      setTimeout(updateTimer, 100);

    }

  }

  $(function () {

    // 开始写 jQuery 代码...

    // 页面加载完成后开始倒计时

    updateTimer();

  });

views.py里也要修改countdown函数

views.py：

def countdown(request):

	# 设置倒计时结束时间（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绘制圆环进度条的插件，不依赖任何库。

效果：放大失真、丑

Bootstrap官网精选模板中的一些模板有环形进度条，可以导入模板后直接使用。

【D01】Django中实现带进度条的倒计时功能（简易版）的更多相关文章

  1. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  2. 自定义带进度条的WebView , 增加获取web标题和url 回掉

    1.自定义ProgressWebView package com.app.android05; import android.content.Context; import android.graph ...

  3. Qt带进度条的启动界面（继承QSplashScreen，然后使用定时器）

    通过继承QSplashScreen类,得到CMySplashScreen类,然后在CMySplashScreen中定义QProgressBar变量,该变量以CMySplashScreen为父类,这样就 ...

  4. wxpython StatuBar 带进度条的状态栏

    # -*- coding: utf- -*- import wx class customStatusBar(wx.StatusBar): def __init__(self, parent): wx ...

  5. HTML5多图片拖拽上传带进度条

    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...

  6. HTML5 jQuery+FormData 异步上传文件，带进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...

  7. 【Web】前端文件上传，带进度条

    最近做项目发现,在文件上传的过程中,增加进度条,能大大改善用户体验.本例介绍带进度条的文件上传 环境搭建 参考:[Java]JavaWeb文件上传和下载. 原生ajax上传带进度条 <%@ pa ...

  8. Asp.Net上传大文件带进度条swfupload

    Asp.Net基于swfupload上传大文件带进度条百分比显示,漂亮大气上档次,大文件无压力,先看效果 一.上传效果图 1.上传前界面:图片不喜欢可以自己换 2.上传中界面:百分比显示 3.上传后返 ...

  9. Android带进度条的文件上传，使用AsyncTask异步任务

    最近项目中要做一个带进度条的上传文件的功能,学习了AsyncTask,使用起来比较方便,将几个方法实现就行,另外做了一个很简单的demo,希望能对大家有帮助,在程序中设好文件路径和服务器IP即可. A ...

  10. atitit. 文件上传带进度条 atiUP 设计 java c# php

    atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...

随机推荐

  1. 杭电OJ刷题指南（ACM）

    杭州电子科技大学Oj是著名的算法竞赛刷题网站!!

  2. socket.timeout: The read operation timed out完美解决方案【转】

    原博: https://blog.csdn.net/qq_44588905/article/details/113783373 更换 pip 源自国内镜像,在 pip install 后面添加 -i ...

  3. Qt滚动条样式

    Qt手动设置滚动条的qss样式 QScrollBar:vertical { width: 14px; margin: 16px 0 16px 0; background: #eaeaea; } QSc ...

  4. find命令排除指定目录搜寻文件

    Find 命令在指定路径中搜索筛选文件,并排除非期望目录. 第一种: 语法: find <path> [-path <path> -prune -o] [...] 中括号是可选 ...

  5. Blob文件下载type类型

    let url = window.URL.createObjectURL(new Blob([文件流(一般为res.data)], {type: "Blob类型"}) let li ...

  6. tomcat的SSL配置

    Table of Contents 1. 删除别名为tomcat的密钥 2. 生成别名为tomcat的密钥 3. tomcat配置密钥存储路径 4. 生成证书并通过浏览器导入 5. 80,443端口重 ...

  7. MFC 与 C++ 类型转换

    C++ 中到的类型转换很多,先记录下来,多了写成一个类 1.CString转int 1 CString cNum="9527"; 2 int iNum = 0; 3 iNum=at ...

  8. Android笔记--图像显示

    imageView 具体实现: 注意:图片名称应当为小写的英文字母与数字的结合,当然,二者可以只存在其一 图片的放置的比例:(通过scaleType属性设置) ImageButton ImageBut ...

  9. 141. Linked List Cycle (Easy)

    ps:能力有限,若有错误及纰漏欢迎指正.交流 Linked List Cycle (Easy) https://leetcode.cn/problems/linked-list-cycle/descr ...

  10. 计算机网络中各种报文、HEADER的读法

    计算机里到处都是格式,规范.比如<操作系统真象还原>里提到的"魔数" 直接出现的一个数字,只要其意义不明确,感觉很诡异,就称之为魔数. 拿elf文件头举例 ELF He ...