【D01】Django中实现带进度条的倒计时功能(简易版)

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

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

前期准备

  1. 前端框架

    你需要准备一些前端框架:Bootstrap4jQuery
    安装方法请自行查阅官方文档或教程

  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官网精选模板中的一些模板有环形进度条,可以导入模板后直接使用。

本文作者:stu(dying)

本文链接:https://www.cnblogs.com/DingyLand/p/pomnote_01_.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   stu(dying)  阅读(553)  评论(2编辑  收藏  举报
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
🔑
  1. 1 Dancing with my phone (Explicit) HYBS
  2. 2 Catch (Feat. Hwa Sa) Epik High (에픽하이)
  3. 3 건물 사이에 피어난 장미 (Rose Blossom) H1-KEY
  4. 4 The Weekend 88rising,BIBI
  5. 5 天气未报 余佳运
  6. 6 和你 余佳运
  7. 7 九月底 余佳运
  8. 8 POP/STARS K/DA,Madison Beer,(G)I-DLE,Jaira Burns
  9. 9 Uh-Oh (G)I-DLE
  10. 10 For You (G)I-DLE
  11. 11 데이지(雏菊) PENTAGON
  12. 12 BAD PENTAGON
건물 사이에 피어난 장미 (Rose Blossom) - H1-KEY
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

건물 사이에 피어난 장미 - H1-KEY

词:Young K

曲:Hong Ji Sang

编曲:Hong Ji Sang

건물 사이에 피어난 장미

제발 살아남아 줬으면

제발 살아남아 줬으면

꺾이지 마 잘 자라줘

온몸을 덮고 있는 가시

얼마나 힘이 들었으면

얼마나 힘이 들었으면

견뎌내줘서 고마워

예쁘지 않은 꽃은 다들

골라내고 잘라내

예쁘면 또 예쁜 대로

꺾어 언젠가는 시들고

왜 내버려 두지를 못해

그냥 가던 길 좀 가

어렵게 나왔잖아

악착같이 살잖아 hey

나는 건물 사이에 피어난 장미

삭막한 이 도시가

삭막한 이 도시가

아름답게 물들 때까지

고갤 들고 버틸게 끝까지

고갤 들고 버틸게 끝까지

모두가 내 향길 맡고 취해 웃을 때까지

모두가 내 향길 맡고 취해 웃을 때까지

Oh oh oh oh

Oh oh oh oh

No I'm not goin' down I'll be alright

No I'm not goin' down I'll be alright

Yeh I'm only goin' up and Imma be alright

Hey

내가 원해서 여기서 나왔냐고

내가 원해서 여기서 나왔냐고

원망해 봐도 안 달라져 하나도

원망해 봐도 안 달라져 하나도

지나고 돌아보면

앞만 보던 내가 보여

그때그때 잘 견뎌냈다고

생각 안 해 그냥 날 믿었다고

거센 바람이 불어와

내 살을 베려 해도

자꾸 벌레들이 나를

괴롭히고 파고들어도

No 언제나 굴하지 않고

쓰러지지 않아 난

어렵게 나왔잖아

악착같이 살잖아

나는 건물 사이에 피어난 장미

나는 건물 사이에 피어난 장미

삭막한 이 도시가

삭막한 이 도시가

아름답게 물들 때까지

고갤 들고 버틸게 끝까지

고갤 들고 버틸게 끝까지

모두가 내 향길 맡고 취해 웃을 때까지

모두가 내 향길 맡고 취해 웃을 때까지

Keep it up

Keep it up

Oh oh oh oh

It's a song for you and I

Say that we're alive

Celebrate it now

나는 건물 사이에 피어난 장미

나는 건물 사이에 피어난 장미

삭막한 이 도시가

삭막한 이 도시가

아름답게 물들 때까지

고갤 들고 버틸게 끝까지

고갤 들고 버틸게 끝까지

모두가 내 향길 맡고 취해 웃을 때까지

모두가 내 향길 맡고 취해 웃을 때까지

Keep it up

Oh oh oh oh

No I'm not goin' down I'll be alright

Yeh I'm only goin' up and Imma be alright

Hey

Keep it up

Oh oh oh oh

No I'm not goin' down I'll be alright

Yeh I'm growin' up and Imma be alright

Hey