Realización del efecto de cuenta regresiva simple en JavaScript

efecto de cuenta regresiva

Realizado por js objeto de fecha incorporado Fecha

Análisis de efectividad:

Algoritmo central:

1. El tiempo de entrada menos el tiempo actual es el tiempo restante, es decir, la cuenta atrás.
2. Hazlo con una marca de tiempo. El número total de milisegundos del tiempo de entrada del usuario menos el número total de milisegundos de la hora actual es el número de milisegundos del tiempo restante.
3. Convierta el número total de milisegundos del tiempo restante en días, horas, minutos y segundos (las marcas de tiempo se convierten en horas, minutos y segundos)

La fórmula de conversión es la siguiente:

• d = parseInt(segundos totales / 60 / 60 / 24); // Calcular el número de días
• h = parseInt(segundos totales / 60 / 60 % 24) // calcular horas
• m = parseInt(segundos totales / 60 % 60); // Calcular fracción
• s = parseInt(total segundos% 60); // Calcular los segundos actuales

Segmento de código específico:

  function countDown(time) {
    
    
        //现在时间的总的毫秒数
        var nowTimes = +new Date();
        //用户输入时间总的毫秒数
        var inputTimes = +new Date(time);
        //剩余时间的毫秒数
        var times = (inputTimes - nowTimes) / 1000;
        //把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
        d = parseInt(times / 60 / 60 / 24); 
        d = d < 10 ? '0' + d : d;
        h = parseInt(times / 60 / 60 % 24) 
        h = h < 10 ? '0' + h : h;
        m = parseInt(times / 60 % 60); 
        m = m < 10 ? '0' + m : m;
        s = parseInt(times % 60);  
        s = s < 10 ? '0' + s : s;
        return d+'天'+h+'时'+m+'分'+s+'秒';
    }
     // 把函数的返回值（字符串形式）渲染到body标签内
     document.body.innerHTML = countDown('2021-03-19 22:00:00')
    // 定时器 每隔1秒渲染一次
    setInterval(function () {
    
    
        document.body.innerHTML = countDown('2021-03-19 22:00:00')
    }, 1000)

Darse cuenta del efecto:

Nota: En el algoritmo central, no es posible restar horas, minutos y segundos directamente. Por ejemplo, restar 25 minutos de 05 minutos dará como resultado números negativos. La operación correcta es obtener el número total de milisegundos y restarlos para encontrar la diferencia.

¡Bienvenido a leer, espero poder ayudarte!