Entonces tengo una variable de timer que apunta a un párrafo en html. Ahora quiero cambiar el contenido de este párrafo para mostrar el tiempo
timer.innerHTML = hr + ":" + min;Nota: hr y min son variables que almacenan la hora actual.
Entonces, para evitar una situación en la que la hora se muestre como "9:7" cuando son las 09:07 a.m., agregué un montón de declaraciones if
If(hr < 10){ timer.innerHTML = "0" + hr + ":" + min; } If (min < 10){ timer.innerHTML = hr + ":" + min; }Sin embargo, también quiero hacerlo durante horas, minutos y segundos. ¿Hay una manera más eficiente de hacer esto en lugar de con un montón de declaraciones if? Porque puede volverse bastante tedioso escribir sentencias if para cada posibilidad.
Pruebe esto, con un operador condicional ternario (consulte los documentos en MDN para obtener ayuda):
time.innerHTML = (hr < 10 ? '0' : '') + hr + ':' + (min < 10 ? '0' : '') + min;Aquí está la documentación de MDN para el operador condicional: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Use String.prototype.padStart() para rellenar una cadena con otra cadena, en este caso '0' hasta que alcance la longitud deseada, que es 2 en este caso. (1)
function printTime(hour, minute) { const hr = hour.padStart(2, 0) const min = minute.padStart(2,0) console.log('The time is ' + hr + ':' + min) } printTime('12', '45') printTime('1', '4') printTime('5', '12')Dado que es una función de prototipo de cadena, la entrada debe ser una cadena o convertirse en una. Entonces, si desea usar números, hay un par de formas en que puede hacerlo:
function printTime(hour, minute, second) { const hr = ('' + hour).padStart(2, 0) // Convert to string in an expression const minString = minute + '' // Convert and store in a variable const min = minString.padStart(2,0) const sec = second.toString().padStart(2,0) // Use toString() console.log(`The time is ${hr}:${min}:${sec}`) } printTime(12, 45, 2) printTime(1, 2, 5) printTime(5, 20 ,59)Sé que no lo preguntaste, pero si miras el registro de la consola anterior, usé literales de plantilla para hacer la cadena final. Le permiten interpolar cadenas con variables y expresiones de una manera más limpia, más fácil de escribir y más atractiva. (2)
una forma divertida de hacerlo, usando intl api:
const myDateFormat = new Intl.DateTimeFormat( undefined, { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12:false }) ; const hr = 8, min = 9, sec = 7 ; console.log( myDateFormat.format( new Date(0,0,0, hr, min, sec ) ) ) ;08:09:07
editar> algunos enlaces alrededor de intl:
https://devhints.io/wip/intl-datetime
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl
https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/