Laravel 8项目中如何用JS将Algolia返回的秒数转成时分格式

1. 编写秒数转时分的工具函数 #

先写一个通用的JS函数，处理秒到时分的转换逻辑，同时兼容异常值：

function formatSecondsToHoursMinutes(seconds) {
    // 处理null、非数字、负数等异常情况
    if (seconds == null || isNaN(seconds) || seconds < 0) {
        return '未知时长';
    }

    const hours = Math.floor(seconds / 3600);
    const remainingSeconds = seconds % 3600;
    const minutes = Math.floor(remainingSeconds / 60);

    let result = '';
    if (hours > 0) {
        result += `${hours}小时`;
    }
    // 没有小时时至少显示分钟，有小时但分钟为0则省略分钟
    if (minutes > 0 || hours === 0) {
        result += `${minutes}分钟`;
    }

    return result.trim();
}

2. 在show.blade.php中处理静态渲染数据 #

如果创作者数据是页面加载时已通过Laravel传递到模板的，直接在模板中调用函数转换：

<!-- 假设$creator是从Algolia拉取后传入模板的对象 -->
<div class="creator-card">
    <h2>{{ $creator->name }}</h2>
    <p>时长：<span class="duration-text">{{ $creator->length }}</span></p>
</div>

<script>
// 复制上面的formatSecondsToHoursMinutes函数到这里
function formatSecondsToHoursMinutes(seconds) {
    if (seconds == null || isNaN(seconds) || seconds < 0) {
        return '未知时长';
    }

    const hours = Math.floor(seconds / 3600);
    const remainingSeconds = seconds % 3600;
    const minutes = Math.floor(remainingSeconds / 60);

    let result = '';
    if (hours > 0) {
        result += `${hours}小时`;
    }
    if (minutes > 0 || hours === 0) {
        result += `${minutes}分钟`;
    }

    return result.trim();
}

// 页面加载完成后批量转换时长
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.duration-text').forEach(el => {
        const seconds = parseInt(el.textContent.trim(), 10);
        el.textContent = formatSecondsToHoursMinutes(seconds);
    });
});
</script>

3. 异步拉取Algolia数据的动态处理 #

如果是用Algolia JS客户端异步拉取数据，直接在渲染时调用转换函数：

// 初始化Algolia客户端（替换成你的凭证）
const client = algoliasearch('YOUR_APP_ID', 'YOUR_SEARCH_API_KEY');
const index = client.initIndex('creators');

// 搜索并渲染数据
index.search('创作关键词', { hitsPerPage: 10 })
.then(({ hits }) => {
    const container = document.getElementById('creators-list');
    container.innerHTML = hits.map(creator => `
        <div class="creator-item">
            <h3>${creator.name}</h3>
            <p>时长：${formatSecondsToHoursMinutes(creator.length)}</p>
        </div>
    `).join('');
});

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