Quería obtener la hora de inicio y la hora de finalización por separado, así que escribí un código como este:
const date = new Date(); let start = date.getHours() + date.getMinutes() / 60 + date.getSeconds() / 60 / 60; function startRecord() { document.getElementById("1").innerHTML = start; } function endRecord() { let end = date.getHours() + date.getMinutes() / 60 + date.getSeconds() / 60 / 60; document.getElementById("2").innerHTML = end; } <p id="1">Show start time</p> <p id="2">Show end time</p> <button type="button" onclick="startRecord()"> start </button> <button type="button" onclick="endRecord()"> end </button> Pero siempre obtuve el mismo resultado.
La hora de inicio y la hora de finalización son las mismas, aunque pasé algo de tiempo entre ellas.
¿Cómo puedo obtener el resultado correcto?
Porque solo tienes una instancia de fecha. Debe utilizar 2 variables de fecha.
Debe crear un nuevo objeto de fecha si desea una nueva hora. Cambia tu javascript a esto:
let date = new Date(); let start = date.getHours() + date.getMinutes() / 60 + date.getSeconds() / 60 / 60; function startRecord() { date = new Date(); document.getElementById("1").innerHTML = start; } function endRecord() { date = new Date(); let end = date.getHours() + date.getMinutes() / 60 + date.getSeconds() / 60 / 60; document.getElementById("2").innerHTML = end; }Su código obtiene la fecha/hora actual en el momento en que se carga el script, no cuando se hace clic en el botón.
Debe obtener la fecha/hora en el controlador de clics, de modo que refleje el momento en que ocurrió el clic.
Dado que necesita hacer el mismo cálculo en ambos controladores de clics, coloque esa lógica en una función y llámela desde ambos controladores de clics:
function getCurrentTime() { const date = new Date(); return date.getHours() + date.getMinutes() / 60 + date.getSeconds() / 60 / 60; } function startRecord() { document.getElementById("1").innerHTML = getCurrentTime(); } function endRecord() { document.getElementById("2").innerHTML = getCurrentTime(); } <p id="1">Show start time</p> <p id="2">Show end time</p> <button type="button" onclick="startRecord()"> start </button> <button type="button" onclick="endRecord()"> end </button>