纯CSS径向计时器结合Django实现无JS同步与持久化方案咨询

结论 #

两个需求都可以完全基于Django + 纯CSS实现，无需引入任何JavaScript代码。

实现原理 #

核心利用CSS animation-delay 支持负值的特性：当 animation-delay 设为 -Xs 时，浏览器会直接将动画定位到已经执行了X秒的状态，无需等待延迟时间，也不需要脚本介入控制进度。

所有进度计算逻辑全部在Django后端完成，统一使用服务器时间，完全规避客户端时间不一致的问题，天然保证所有访问者的动画进度同步，同时页面刷新时后端会重新计算当前进度偏移量，自动对齐当前周期的进度，不会出现重置。

具体实现步骤 #

1. 后端视图逻辑（Django views.py） #

首先在视图中计算当前5分钟周期的已流逝时间，生成对应的负延迟值：

import time
from django.shortcuts import render

def timer_page(request):
    # 5分钟 = 300秒，计算当前时间在本轮5分钟周期内的已流逝秒数
    cycle_seconds = 5 * 60
    current_offset = int(time.time()) % cycle_seconds
    # 生成CSS负延迟值，直接跳转到对应进度
    animation_delay = f"-{current_offset}s"
    return render(request, "timer.html", {"animation_delay": animation_delay})

2. 模板渲染逻辑 #

在模板中直接将后端生成的延迟值注入到计时器元素的内联样式中，你可以直接替换示例中的径向计时器样式为你已经实现的版本：

<!DOCTYPE html>
<html>
<head>
    <style>
        .radial-timer {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            /* 示例径向计时器基础样式，可替换为你的实现 */
            background: conic-gradient(#2196F3 0%, #eee 0%);
            /* 动画配置：300秒时长、线性匀速、无限循环 */
            animation: timer 300s linear infinite;
        }

        @keyframes timer {
            0% {
                background: conic-gradient(#2196F3 0%, #eee 0%);
            }
            100% {
                background: conic-gradient(#2196F3 100%, #eee 0%);
            }
        }
    </style>
</head>
<body>
    <!-- 注入后端生成的动画延迟值 -->
    <div class="radial-timer" style="animation-delay: {{ animation_delay }};"></div>
</body>
</html>

效果验证 #

• 多用户同时访问页面时，所有用户的计时器进度完全一致，完全由服务器时间统一控制
• 页面刷新后，后端会重新计算当前的周期偏移量，进度会自动对齐当前时间的正确状态，不会重置

注意事项 #

• 请确保服务器时间已通过NTP服务校准，多实例部署时所有服务节点时间保持一致即可
• 若需要调整计时器周期，仅需修改后端 cycle_seconds 的值和CSS动画的时长参数即可

内容的提问来源于stack exchange，提问作者jovianlynxdroid