Đô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);
}
});