Chuyển đổi định dạng thời gian HH:MM:SS trong JS

Đôi khi bạn muốn chuyển đổi chuỗi thời gian HH: MM: SS thành giây trong JavaScript. Hoặc cộng số giây bất kỳ vào định dạng thời gian hh:mm:ss. Trong bài viết này, chúng ta sẽ xem xét cách chuyển đổi chuỗi thời gian HH: MM: SS thành giây trong JavaScript.

Chuyển đổi giây thành định dạng hh:mm:ss trong JS

Để lấy thời gian ta dùng function toISOString. Sau đó dùng slice để cắt chuỗi nhé.

const seconds = 600;
new Date(seconds * 1000).toISOString()
'1970-01-01T00:01:40.000Z'

Lấy thời gian theo định dạnh hh:mm:ss

onst seconds = 600;
const result = new Date(seconds * 1000).toISOString().slice(11, 19);
console.log(result); // "00:10:00" (hh:mm:ss)

Trường hợp bạn chỉ cần định dạng kiểu mm:ss thì cắt chuỗi như sau

const result2 = new Date(seconds * 1000).toISOString().slice(14, 19);
console.log(result2); //"10:00" (mm:ss)

Cộng thêm số giây bất kì vào định dạng hh:mm:ss

Ví dụ ta đang có 1 chuỗi với định dạng hh:mm:ss và muốn cộng thêm vào 100s thì thực hiện như sau

const timeAdd = 100;
const sourceTime = '22:12:23'; //hh:mm:ss
//tách giờ phút giây
const [hours, minutes, seconds] = sourceTime.split(':');
//chuyển đổi tất cả thành giây, dấu + giúp convert thành số dương
const totalSeconds = (+hours) * 60 * 60 + (+minutes) * 60 + (+seconds);
const changeSecond = timeAdd + totalSeconds;
//chuyển đổi số giây về lại định dạng hh:mm:ss
const newTimes  = new Date(changeSecond * 1000).toISOString().slice(11, 19)
console.log(newTimes) //"22:14:03"

Tạo vòng tròn load thời gian (timing process)

Giả sử bạn đang cần tạo 1 spinner loading đếm thời gian chạy thì ta thực hiện như sau

$('#btn-loading').on('click', function() {
            
            var html = `
            <div id="overlay" style="display:none;">
                <div class="spinner"></div>
                <br/>
                Loading ...<br>
                <div id="timing-process"></div>
            </div>
            `
            $(".wrapper").after(html);
            $('#overlay').fadeIn();
            if($("#timing-process").length > 0) {
              //lấy thời gian bắt đầu
                var startTime = new Date();
              //dùng setInterval 1s update 1 lần
                setInterval(function () {
                    var time_run = Math.floor((new Date() - startTime)/ 1000);
                    console.log(time_run);
                    var timeM = Math.floor(time_run % (24 * 60 * 60) % (60 * 60) / 60);
                    var timeS = time_run % (24 * 60 * 60) % (60 * 60) % 60;
                    var timeDMS = ((timeM) ? (timeM + 'Phút') : '') + timeS + 'Giây';
                    $('#timing-process').text("Đã chạy：" + timeDMS);
                }, 1000);
            }
        });