【D01】Django中实现带进度条的倒计时功能(简易版) |
您所在的位置:网站首页 › vue实现倒计时 › 【D01】Django中实现带进度条的倒计时功能(简易版) |
首先说明简易版是只有一个 倒计时 和一个 进度条,页面加载后自动开始计时,下次计时需要手动刷新页面。 后续会更新实现完整的倒计时功能的文章 前期准备前端框架 你需要准备一些前端框架:Bootstrap4 和 jQuery 安装方法请自行查阅官方文档或教程 Bootstrap4:https://v4.bootcss.com/docs/getting-started/download/ jQuery:https://www.runoob.com/jquery/jquery-install.html 保证你的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 Pomodoro Timer 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(); }); Pomodoro TimerTime remaining: 25:00 配置好就可以看到数字时钟在计时了。 嵌入式倒计时器另外,ChatGPT提供了嵌入式倒计时器组件方法 在任何模板中都可以使用以下代码来加载你写的倒计时器: HTML: {% url 'countdown' as countdown_url %}这将在模板中嵌入一个iframe元素,并使用countdown视图函数的URL作为其源。当用户加载页面时,iframe将显示倒计时器,并开始倒计时。 进度条部分HTML: ChatGPT在html中重写了CSS以及添加了JS部分代码,效果十分抽象🙂这很难评 原本想实现一个环形进度条的倒计时组件,因为涉及复杂的CSS样式编写,所以在找到合适的插件之前先用Bootstrap初始的进度条样式 ChatGPT给的代码只有这部分有用,表示进度条的即时更新 html: 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官网精选模板中的一些模板有环形进度条,可以导入模板后直接使用。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |