[Demostración de front-end] El temporizador de cuenta atrás puede elegir el tiempo para implementarlo de forma nativa

Directorio de artículos

Otras demostraciones

Efecto

inserte la descripción de la imagen aquí

Vista previa del efecto: el temporizador de cuenta regresiva puede elegir el tiempo (codepen.io)

referencia:

Reloj simple/temporizador de cuenta regresiva (codepen.io)

Varias formas de lograr el efecto de cuenta regresiva en la página de inicio

proceso

Calendario y obtención de tiempo

esto es<input type="date">

inserte la descripción de la imagen aquí

Quiere obtener la hora: para que se pueda pasar la hora en la que se hizo clic

<input class="date" id="date" type="date" value="" onchange="timeChange(this.value)">

en el centro

Quiero centrar el contenido del cuerpo hacia arriba y hacia abajo, pero no tiene ningún efecto cuando está flexconfigurado justify-content: center;.Esto se debe a que el cuerpo no tiene altura, su altura se reparte por el contenido y no se puede centrar hacia arriba y hacia abajo.Para resolver este problema, es necesario configurar

height: 100vh;

Haga que el cuerpo ocupe toda la ventana y, en este momento, el contenido estará centrado hacia arriba y hacia abajo.
Lo mismo ocurre con el centrado hacia la izquierda y hacia la derecha ( width:100vw).

fondo con palabras

color de fondo:

background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);

El fondo es una especie de verde, el color de la fuente es blanco (o verde claro parcial al blanco) y el color de la sombra del texto sombreado es verde oscuro. Los colores son muy armoniosos.

inserte la descripción de la imagen aquí

Temporizador

Después de obtener la hora seleccionada, podemos calcular la diferencia entre la hora seleccionada y la hora actual, y luego necesitamos escribir un temporizador setTimeOut.llamarse a sí mismo cada segundo, de modo que la cantidad de segundos se reducirá dinámicamente.

timer = setTimeout(function () {
    
    
        timeChange(date)
    }, 1000);

Hacemos que cada llamada timeChangegenere la hora actual: obviamente, cada vez que se llama.

inserte la descripción de la imagen aquí

Tenga en cuenta que no puede escribir aquí:

timer = setTimeout(timeChange(date), 1000);

Esta es una llamada recursiva de complejidad 2n ^, que llama a la función muchas veces. Llamado una vez en el primer segundo, llamado 2 veces en el segundo segundo (original y recientemente recursivo) y llamado 4 veces en el tercer segundo... la pila explotará.

borrar temporizador

Al seleccionar una nueva hora, se debe borrar el temporizador anterior; de lo contrario, dos temporizadores funcionarán al mismo tiempo:

inserte la descripción de la imagen aquí

if(timer!=='') clearTimeout(timer);

el código

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时器</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main">
        <div class="title">
            <div class="text">请输入未来的时间</div>
            <input class="date" id="date" type="date" value="" onchange="timeChange(this.value)">
        </div>
        <div class="container">
            <div class="item">
                <p class="time">D</p>
                <p class="text">DAYS</p>
            </div>
            <div class="item">
                <p class="time">O</p>
                <p class="text">HOURS</p>
            </div>
            <div class="item">
                <p class="time">N</p>
                <p class="text">MINUTES</p>
            </div>
            <div class="item">
                <p class="time">E</p>
                <p class="text">SECONDS</p>
            </div>
        </div>
    </div>

</body>

</html>

<script src="index.js"></script>

CSS

body {
    
    
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.main {
    
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;

}

.title {
    
    
    text-align: center;
}

.title .text {
    
    
    font-size: 50px;
    color: #dbfff69c;
    text-shadow: 0 0 10px #009974;
    margin: 40px 0;
}

.title .date {
    
    
    width: 100px;
    text-align: center;
    margin-bottom: 35px;
    background-color: #beffef;
    border-radius: 10px;
    border: 1px solid #beffef;
    padding: 5px;

}

.container {
    
    
    display: flex;
    margin-left: 90px;
}

.container .item {
    
    
    margin-right: 70px;
    text-align: center;
}

.container .item .time {
    
    
    font-size: 36px;
    font-weight: 300;
}

.container .item .text {
    
    
    font-size: 14px;
    font-weight: 400;
    border-top: 1px solid #131313;
    padding-top: 10px;
    margin-top: -14px;
}

js

let timer=''

function timeChange(date) {
    
    
    console.log(date)

    // 每次选择了新时间要关闭之前的定时器
    if(timer!=='') clearTimeout(timer);

    let now = new Date().getTime();
    let future = new Date(date).getTime()
    let distance = future - now

    const time = document.getElementsByClassName('time')
    const len = time.length;

    if (distance <= 0) {
    
    
        let arr = 'DONE'
        for (let i = 0; i < len; i++) {
    
    
            time[i].innerHTML = arr[i];
        }
        timer=''
        return;
    }

    let days = Math.floor(distance / (1000 * 60 * 60 * 24));
    distance -= days * (1000 * 60 * 60 * 24);
    let hours = Math.floor(distance / (1000 * 60 * 60));
    distance -= hours * (1000 * 60 * 60);
    let minutes = Math.floor(distance / (1000 * 60));
    distance -= minutes * (1000 * 60);
    let seconds = Math.floor(distance / 1000);

    let arr = [days, hours, minutes, seconds];
    for (let i = 0; i < len; i++) {
    
    
        time[i].innerHTML = arr[i];
    }

    timer = setTimeout(function () {
    
    
        timeChange(date)
    }, 1000);
}