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

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

前期准备

  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. Activity基础知识

    Activity 一.Activity是什么 Activity是一种可以包含用户界面的组件,主要用于和用户进行交互.一个应用程序可以包含零个或多个活动. 二.活动的基本用法 1. 手动创建活动 ​ 打 ...

  2. C语言初级阶段8——预处理

    C语言初级阶段8--预处理 预定义符号 1.概念:预处理是编译之前做的一些事. 2.常用的预定义符号: 注意:: (1)-(4)的格式占位符都用%是,如:printf("%s",D ...

  3. 【Win11】Win11家庭版升级专业版

    1.将已激活的Win11家庭版升级成未激活的Win11专业版:输入密钥[BCQNW-3VWYB-4V7QD-M6R2B-7MH26] 2.将未激活的Win11专业版升级成已激活的专业版 :输入密钥[6 ...

  4. link和@import的对比

    概念的区别  @import 是css的语法规则: link 是HTML标签 用途的区别  @import 是css语法,只能用来导入样式文件: link 除了引入样式,还可引入其他资源文件 加载顺序 ...

  5. [Leetcode 108]有序数组转BST二叉搜索树Convert Sorted Array to Binary Search Tree

    题目 https://leetcode.com/problems/convert-sorted-array-to-binary-search-tree/ Given an integer array  ...

  6. FreeType 矢量字体 测试移植（1）

    之前有做过 ascii 和汉字库的字体点阵在lcd上显示的例子,都是按照指定大小的字库的点阵来显示的,所以一但选定了字体文件后,就固定了大小,不可变化,当然也可以存放各种 大小的字体文件,但这样的话就 ...

  7. Spring bean注入问题：NoUniqueBeanDefinitionException解决方案归纳

    引言 spring实现的bean自动注入在项目开发中是一个经常使用到的功能,但自动装配两个或多个bean时,会抛出NoUniqueBeanDefinitionException:No qualifyi ...

  8. c#获取文本中的内容

    string path = HttpContext.Current.Server.MapPath("/文件夹/名称.txt"); string ss = File.ReadAllT ...

  9. Spring设计模式——代理模式[手写实现JDK动态代理]

    代理模式 代理模式(Proxy Pattern):是指为其他对象提供一种代理,以控制对这个对象的访问. 代理对象在客户端和目标对象之间起到中介作用,代理模式属于结构型设计模式. 使用代理模式主要有两个 ...

  10. Linux值得收藏的40个命令总结，常用的正则表达式

    1 删除0字节文件 find -type f -size 0 -exec rm -rf {} \; 2 查看进程 按内存从大到小排列 PS -e -o "%C : %p : %z : %a& ...