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

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

前期准备

  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. Navicat15激活

    1.下载Navicat for MySQL 15 https://www.navicat.com.cn/download/navicat-for-mysql 2.下载激活工具 注意:因某些限制,下载链 ...

  2. asp.net页面button按钮防止重复提交的方法

    网上找了一些实现方案都不行,就自己写了个用,还行. 先放javascript代码: <script type="text/javascript"> var clicks ...

  3. 【前端工程化】使用Nexus 搭建前端 npm 私服

    参考文献1 - https://blog.51cto.com/lookingdream/3609619 参考文献2 - https://blog.csdn.net/u013278374/article ...

  4. 本地插件文件导入cordova 项目中

    cordova plugin add F:\ucc\android\cordova-plugin-datepicker add 后面是插件文件的本地地址

  5. NX1946_MoldWizard 注塑模向导建立标准库

    NX1946_MoldWizard 注塑模向导建立标准库

  6. Konga-Kong网关的权限控制指定消费者

    刚开始陷入了误区了,网上很多参考例子都是如何实现身份证验证,而且看到konga上面配置身份插件的地方基本都有consumer一个配置项,一直纠结在这个如何通过key-auth实现指定的route或者s ...

  7. JS和PHP中能转为布尔false的值的对比

    实际开发中经常会使用到JS和PHP中的变量转布尔值进行条件判断,下面对两种语言中转布尔类型结果为false的值进行对比,加深记忆和方便引用. 除了下表列出项,其它的值均转成真值true . 转布尔值后 ...

  8. 【LeetCode997】【哈希表】[Py/C#/Scala/Elixir/Kotlin/Rust/Ruby/Swift/PHP/Java/Go/C++/TS/Erlang/Racket/Dart] 一道统计入度出度的简单题目

    可以看到,一般而言,Python最接近"想思路时写的伪代码" 目录 解题思路 代码 python3 C# scala elixir kotlin rust ruby swift p ...

  9. Spring事务的底层原理

    1. 划分处理单元--IOC 由于spring解决的问题是对单个数据库进行局部事务处理的,具体的实现首相用spring 中的IOC划分了事务处理单元.并且将对事务的各种配置放到了ioc容器中(设置事务 ...

  10. java多线程--3 线程状态、线程方法、线程类型

    java多线程--3 线程状态.线程方法.线程类型 线程状态 创建状态: **就绪状态: ** 进入状态: 创建状态:启动线程 阻塞状态:阻塞解除 运行状态:释放CPU资源 阻塞状态: 进入状态: 运 ...