Django中基于数据库的倒计时器前端无法显示问题求助

你的代码主要存在三个核心问题导致倒计时span无内容：模板变量语法错误、timedelta对象无法直接给JS做数值运算、未处理初始超时场景，以下是具体修正方案：

后端代码修正（二选一即可） #

方案1：后端提前转换为总秒数 #

直接将timedelta对象转换为总秒数后传入上下文，让前端可以直接使用数值：

exam_model = modelUjian.objects.get(kodeujian=kodeujian)
finish_time = datetime.combine(exam_model.date, exam_model.finishtime)
current_time = datetime.now().replace(microsecond=0)
time_left = finish_time - current_time 
# 转换为总秒数，JS可直接处理数值类型
time_left_seconds = time_left.total_seconds()
context = {"time_left_seconds": time_left_seconds}
return render(request,'mulaiujian.html', context)

方案2：后端保持原代码，前端调用timedelta方法 #

如果不想修改后端逻辑，前端可直接调用Django timedelta对象的total_seconds()方法获取总秒数。

前端代码修正 #

修正模板变量语法，补充格式补零逻辑，同时提前处理初始超时情况：

<div class="card">
    <div class="card-body">
        <p>Waktu tersisa: <span id="countdown"></span></p>
    </div>
</div>

<script>
    // 对应方案1：使用后端传入的总秒数
    let countdown = {{ time_left_seconds }};
    // 对应方案2：如果用原后端代码，替换成下面这行
    // let countdown = {{ time_left.total_seconds }};

    const countdownEl = document.getElementById("countdown");
    // 先判断是否已超时
    if (countdown <= 0) {
        countdownEl.innerHTML = "Waktu telah habis!";
    } else {
        const timer = setInterval(() => {
            // 计算时分秒
            const hours = Math.floor(countdown / 3600);
            const minutes = Math.floor((countdown % 3600) / 60);
            const seconds = Math.floor(countdown % 60);

            // 补零函数，确保显示两位数字
            const padZero = num => num.toString().padStart(2, '0');

            // 格式化输出倒计时
            countdownEl.innerHTML = `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;

            if (countdown <= 0) {
                clearInterval(timer);
                countdownEl.innerHTML = "Waktu telah habis!";
            } else {
                countdown--;
            }
        }, 1000);
    }
</script>

问题原因说明 #

1. 模板变量语法错误：Django模板必须用双大括号{{ 变量名 }}渲染变量，你使用了单大括号{ time_left }，导致JS解析时出现语法错误，变量未正确赋值。
2. timedelta对象无法直接作为数值：原代码中time_left是datetime.timedelta对象，直接渲染会输出类似01:30:00的字符串，JS无法对字符串进行除法运算，计算出的时分秒均为NaN，因此无内容显示。
3. 未处理初始超时场景：如果当前时间已超过截止时间，原代码会先显示负数倒计时，再切换到超时提示，用户体验不佳。

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