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

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

前期准备

  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. PR2022(Premiere Pro 2022)Mac/win最新中文版

    Adobe Premiere Pro 2022 Mac/win是用于专业级别的视频编辑软件,一个基于时间轴的视频处理工具,具有许多用于生成高端视频的不同功能.Adobe Premiere Pro最重要 ...

  2. Ajax属性

    如何创建一个 Ajax <script>         window.onload=function(){             1)创建一个异步调用对象             va ...

  3. Qt回车键提交文本代码

    QTextEdit 文本框中 回车键提交文本,Ctrl+回车键实现换行的代码: void QTextEdit::keyPressEvent(QKeyEvent * e) { e->ignore( ...

  4. 字符串替换Replace仅替换第一个匹配项

    C#里面的String.Replace(string,string)方法替换的时候是替换所有的匹配项,但是有时候我们会遇到这样的需求,就是只替换第一个匹配项. 我这里自己写另一个方法来实现这个功能,求 ...

  5. js数组原型方法

    今天学习了一下js数组原型的操作方法,小结一下学习地址https://www.cnblogs.com/obel/p/7016414.html 1.join() join(separator): 将数组 ...

  6. python全局变量和局部变量的关系

    今天看了一个全局变量,有点懵不知道全局变量是什么.然后就开始查找相关的资料 总结就一句话:你到哪里都是大爷,就是这么吊 有全局变量那么也有局部变量,同时也用一句话概括:外面怂成孙子,家里横成老子 接下 ...

  7. liunx 目录详解

    /etc/sysconfig/network-scripts/ifcfg-eth0  第一块网卡的配置文件 /etc/sysconfig/network    主机名配置文件 /etc/profile ...

  8. 离线安装docker和harbor

    1.下载docker和harbor版本(版本自选) docker下载地址: https://download.docker.com/linux/static/stable/x86_64/ harbor ...

  9. 日志注解，基于ruoyi的后置切面改进而来

    有次接口响应时间太长,想知道具体接口执行的时间是多少,于是决定通过注解来实现这个想法,刚好ruoyi本身就提供了完善的日志注解,虽然是采用后置通知,但是完全不影响我们改造它. 想要实现接口耗时的功能, ...

  10. git merge的原理

    当我我们拉去代码合并到master的另一个分支上面去的时候 只是对比当前分支commit的修改与增加的代码,其他代码以master为主.