วิธีแปลงวินาทีเป็น HH: mm: ss ในช่วงเวลา js


94

ฉันจะแปลงวินาทีเป็นHH:mm:ssอย่างไร

ในขณะนี้ฉันกำลังใช้ฟังก์ชันด้านล่าง

render: function (data){
     return new Date(data*1000).toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");;
}

สิ่งนี้ใช้ได้กับ chrome แต่ใน firefox เป็นเวลา 12 วินาทีฉันได้รับ01:00:12 ฉันต้องการใช้ moment.js สำหรับความเข้ากันได้ของเบราว์เซอร์ข้าม

ฉันลองแล้ว แต่ไม่ได้ผล

render: function (data){
         return moment(data).format('HH:mm:ss');
}

ผมทำอะไรผิดหรือเปล่า?

แก้ไข

ฉันจัดการเพื่อหาวิธีแก้ปัญหาโดยไม่มี moment.js ซึ่งเป็นดังนี้

return (new Date(data * 1000)).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];

ยังคงสงสัยว่าฉันจะทำมันได้อย่างไรในอีกสักครู่ js



@mplungjan ขออภัยที่ไม่ได้กล่าวถึงว่าได้อ่านโพสต์นั้นแล้ว ฉันต้องการเรนเดอร์ตารางที่มีแถวนับล้านและวิธีแก้ปัญหาช้าเกินไป คำตอบที่สองคือสิ่งที่ฉันเขียนไว้ในคำถาม แต่ทำให้ฉันมีปัญหาใน firefox
QGA

2
@QuentinTanioartino ดังนั้น 4 ตัวดำเนินการทางคณิตศาสตร์ที่ไม่สำคัญจึงเป็นปัญหาสำหรับภารกิจในการกลายพันธุ์ DOM สำหรับองค์ประกอบนับล้าน? แน่ใจหรือว่าเข้าใจปัญหาด้านประสิทธิภาพอย่างถูกต้อง
zerkms

@zerkms ดีฉันรู้ว่าคลาส DAO ของฉันต้องถูกเขียนใหม่เพื่อให้บริการข้อมูลที่แปลงแล้ว นี่เป็นปัญหาที่ฉันทราบดี กล่าวว่าฉันค่อนข้างพอใจกับผลการดำเนินการในปัจจุบันของความพยายามครั้งแรกของฉัน แต่เมื่อฉันมีการคำนวณทางคณิตศาสตร์ 5 รายการสำหรับการแปลงที่ทำให้ระบบช้าลง ใช่ฉันเห็นด้วยกับคุณว่านี่เป็นเพียงวิธีแก้ปัญหาชั่วคราว
QGA

@QuentinTanioartino "ที่ทำให้ระบบช้าลงเล็กน้อย" --- "นิดหน่อย" ไม่ใช่เหตุผลของคุณเกี่ยวกับประสิทธิภาพ มันเป็นคอขวดหรือไม่? มันถูกพิสูจน์แล้วว่าจะเป็นคอขวดหรือไม่? ถ้าไม่ - อะไรเป็นแรงผลักดันให้คุณเพิ่มประสิทธิภาพการทำงานนี้
zerkms

คำตอบ:


81

จากโพสต์นี้ฉันจะพยายามหลีกเลี่ยงปัญหาการก้าวกระโดด

moment("2015-01-01").startOf('day')
    .seconds(s)
    .format('H:mm:ss');

ฉันไม่ได้เรียกใช้ jsPerf แต่ฉันคิดว่ามันเร็วกว่าการสร้างออบเจ็กต์วันที่ใหม่เป็นล้านเท่า

function pad(num) {
    return ("0"+num).slice(-2);
}
function hhmmss(secs) {
  var minutes = Math.floor(secs / 60);
  secs = secs%60;
  var hours = Math.floor(minutes/60)
  minutes = minutes%60;
  return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;
  // return pad(hours)+":"+pad(minutes)+":"+pad(secs); for old browsers
}


2
ขอบคุณมากวิธีแก้ปัญหาที่ชาญฉลาดมาก
QGA

1
อันที่สองมันเร็วมาก
QGA

1
คุณสามารถทำได้ในตัวอย่างที่สอง: return [hours, minutes, seconds] .filter (t => t) .map (pad) .join (":")
Onno Faber

@OnnoFaber คุณคิดว่าอะไรเร็วที่สุด? การเรียงต่อกันหรือตัวกรองบวกแผนที่? เราสามารถทำได้ด้วย`${pad(hours)}:${pad(minutes)}:${pad(secs)}`
mplungjan

จากคำตอบทั้งหมดก่อนหน้านี้คำตอบที่ง่ายที่สุดคือmplungjanแต่มีข้อผิดพลาดที่แสดงตัวเลขสุ่มหากค่ามีหน่วยเป็นมิลลิวินาที (ตัวอย่างเช่น 17.3 วินาที) จากรหัสของเขาฉันขอเสนอสิ่งต่อไปนี้: function pad (num) {return ("0" + num) .slice (-2); } / ** * @return {string} * / ส่งออกฟังก์ชันเริ่มต้น renderUserTime (วินาที) {ให้นาที = Math.floor (วินาที / 60); const outputSecs = Math.round (วินาที% 60); ให้ชั่วโมง = คณิตศาสตร์ชั้น (นาที / 60); const outputMinutes = Math.round (นาที% 60); return `$ {pad (hours)}: $ {pad (outputMi
Alberto Soto

98

สิ่งนี้คล้ายกับคำตอบที่ mplungjan อ้างอิงจากโพสต์อื่น แต่กระชับกว่า:

const secs = 456;

const formatted = moment.utc(secs*1000).format('HH:mm:ss');

document.write(formatted);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

มันต้องทนทุกข์ทรมานจากข้อแม้เดียวกันเช่นหากวินาทีเกินหนึ่งวัน (86400) คุณจะไม่ได้รับสิ่งที่คุณคาดหวัง


1
ขอบคุณฉันคิดว่านี่เป็นความต้องการที่พบบ่อยมากเปิดคำขอดึงไปที่ moment.js ที่พวกเขาควรรวมไว้
Morris S

ขอบคุณ @Sophie มีไม่กี่แห่งที่พูดถึง utc () ซึ่งเป็นสิ่งที่จำเป็นสำหรับกรณีของฉัน
61

25

คุณสามารถใช้ปลั๊กอินรูปแบบช่วงเวลาช่วงเวลา :

var seconds = 3820;
var duration = moment.duration(seconds, 'seconds');
var formatted = duration.format("hh:mm:ss");
console.log(formatted); // 01:03:40
<!-- Moment.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<!-- moment-duration-format plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>

ดูFiddleนี้ด้วย

อัปเดต: เพื่อหลีกเลี่ยงการตัดแต่งสำหรับค่าที่น้อยกว่า 60 วินาทีให้ใช้{ trim: false }:

var formatted = duration.format("hh:mm:ss", { trim: false }); // "00:00:05"

มีข้อแลกเปลี่ยนที่ต้องดูด้วยคำตอบของคุณและคำตอบของ @ โซฟี แม้ว่าในทางเทคนิคโซลูชันของคุณจะแสดงระยะเวลา "Time" เป็น hh: mm: ss แต่ก็ต้องใช้ปลั๊กอินเสริม โซฟีคือ "วันที่" จากจุดปัจจุบันในเวลาที่จัดรูปแบบเป็น hh: mm: ss หากคุณลบ "utc" ออกจาก Sophie อาจส่งคืนข้อมูลที่ไม่ถูกต้องเนื่องจากใช้ epoch เป็นวันที่ไม่ใช่จุดปัจจุบันในเวลา ทั้งสองคำตอบได้ผล แค่คิดและเข้าใจ
Michael

ในขณะที่ใช้ CDN และสิ่งที่ไม่สามารถเพิ่มเวลาในการตอบสนองที่เพิ่มขึ้นได้โดยทั่วไปแล้วการคิดว่า "รวมไลบรารีอื่น" เป็นการแลกเปลี่ยนเชิงลบกับการติดตั้งโค้ดด้วยตัวเองเป็นเรื่องอันตราย นี่เป็นกับดักที่ฉันเห็นนักพัฒนาจำนวนมากตกหลุมและท้ายที่สุดก็จบลงด้วยรหัสที่บำรุงรักษาน้อยลง
cytinus

ด้วยเหตุผลบางประการหากวินาที <60 มันก็จบลงด้วยการไม่ฟอร์แมต
Daniel Lizik

@DanielLizik เพียงเพิ่ม {trim: false} เช่น: duration.format ("hh: mm: ss", {trim: false});
Oleksiy Kachynskyy

16
var seconds = 2000 ; // or "2000"
seconds = parseInt(seconds) //because moment js dont know to handle number in string format
var format =  Math.floor(moment.duration(seconds,'seconds').asHours()) + ':' + moment.duration(seconds,'seconds').minutes() + ':' + moment.duration(seconds,'seconds').seconds();

1

ใช้ระยะเวลา moment.js อย่างไรให้ถูกต้อง? | ใช้ moment.duration () ในรหัส

ครั้งแรกที่คุณจำเป็นต้องนำเข้าและmomentmoment-duration-format

import moment from 'moment';
import 'moment-duration-format';

จากนั้นใช้ฟังก์ชันระยะเวลา ให้เราใช้ตัวอย่างข้างต้น 28800 = 8.00 น.

moment.duration(28800, "seconds").format("h:mm a");

🎉คุณไม่มีข้อผิดพลาดด้านบน 🤔คุณได้ค่าที่ถูกต้อง 8.00 น. หรือไม่? ไม่…มูลค่าที่คุณได้คือ 8:00 ก. รูปแบบ Moment.js ไม่ทำงานตามที่ควรจะเป็น

💡วิธีแก้ปัญหาคือการเปลี่ยนวินาทีเป็นมิลลิวินาทีและใช้เวลา UTC

moment.utc(moment.duration(value, 'seconds').asMilliseconds()).format('h:mm a')

เอาล่ะตอนนี้เราได้รับ 8.00 น. หากคุณต้องการเวลา 8.00 น. แทนที่จะเป็นเวลา 8.00 น. เราต้องทำ RegExp

const time = moment.utc(moment.duration(value, 'seconds').asMilliseconds()).format('h:mm a');
time.replace(/:00/g, '')

1

ถึง 24 ชม. เนื่องจากDuration.formatเลิกใช้งานแล้วโดยมี moment@2.23.0

const seconds = 123;
moment.utc(moment.duration(seconds,'seconds').as('milliseconds')).format('HH:mm:ss');

1

ทางออกของฉันสำหรับการเปลี่ยนแปลง วินาที (ตัวเลข) เป็นรูปแบบสตริง (ตัวอย่างเช่น: 'mm: ss'):

const formattedSeconds = moment().startOf('day').seconds(S).format('mm:ss');

เขียนวินาทีของคุณแทน"S"ในตัวอย่างเช่น และใช้ 'formattedSeconds' ในที่ที่คุณต้องการ

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.