如何在jQuery Count Up计时器中实现仅显示非零最高时间单位的功能

我现有一款包含时、分、秒的jQuery Count Up计时器，希望对其显示逻辑进行优化：仅展示数值非零的最高时间单位，并添加对应的单位名称，具体规则如下：

• 当计时数值处于00:00:00至00:00:59区间时，显示示例：49秒
• 当计时数值处于00:01:00至00:59:59区间时，显示示例：26分钟
• 当计时数值处于01:00:00至23:59:59区间时，显示示例：13小时
  （若技术可行，希望额外支持天数显示，但此项非必需）

请问该需求是否可以实现？若可实现，具体的实现方案是什么？

我的初始实现脚本如下：

function startCount() {
 setInterval(function() {
 $(".count").text(function() {
 var val = +$(this).data("secs");
 $(this).data("secs",++val);
 return new Date(val * 1000).toISOString().substr(11, 8);
 })
 }, 1000);
}
startCount()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="count" data-secs="89895"></div>

回答：当然可以实现！而且还能轻松支持天数显示哦～ #

这个需求完全没问题，我们只需要先把总秒数转换成对应的天、小时、分钟、秒，然后按照「天 → 小时 → 分钟 → 秒」的优先级，挑出第一个数值非零的单位来显示就行。

具体实现方案 #

核心逻辑很简单：

1. 每次计时递增时，先算出当前总秒数对应的各时间单位数值
2. 从最高级的时间单位开始检查，找到第一个大于0的单位
3. 把数值和对应单位名称组合起来输出

修改后的完整代码如下：

function startCount() {
    setInterval(function() {
        $(".count").text(function() {
            let totalSeconds = +$(this).data("secs");
            // 先更新秒数
            $(this).data("secs", ++totalSeconds);

            // 计算各时间单位的数值
            const days = Math.floor(totalSeconds / 86400); // 1天=24*60*60=86400秒
            const hours = Math.floor((totalSeconds % 86400) / 3600); // 取完天后剩余的秒数算小时
            const minutes = Math.floor((totalSeconds % 3600) / 60); // 取完小时后剩余的秒数算分钟
            const seconds = totalSeconds % 60; // 最后剩下的就是秒数

            // 按优先级选择显示内容
            if (days > 0) {
                return `${days}天`;
            } else if (hours > 0) {
                return `${hours}小时`;
            } else if (minutes > 0) {
                return `${minutes}分钟`;
            } else {
                return `${seconds}秒`;
            }
        });
    }, 1000);
}
startCount();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="count" data-secs="89895"></div>

代码细节说明 #

• 时间单位计算：用总秒数分别除以各单位的秒数，取整后得到整数的单位数量，比如总秒数除以86400就是天数，余数再除以3600就是小时数，以此类推
• 优先级判断：从最高级的天数开始检查，只要某单位数值大于0，就直接返回该单位的显示文本，这样就保证了只显示最高级的非零单位
• 天数支持：代码里已经包含了天数的计算和判断，完全满足你提到的额外需求，不用额外改动

效果验证 #

举几个例子测试：

• 当data-secs为49时，显示 49秒
• 当data-secs为1560（26分钟）时，显示 26分钟
• 当data-secs为46800（13小时）时，显示 13小时
• 当data-secs为90000（1天1小时）时，显示 1天

这个方案逻辑清晰，代码也容易维护，完全符合你的需求～

内容的提问来源于stack exchange，提问作者Stig Kølbæk