efecto de cuenta regresiva
analisis de CASO
① Esta cuenta regresiva cambia constantemente, por lo que se necesita un temporizador para cambiar automáticamente (establecerIntervalo) Nota: la I de Int es una i mayúscula y la l de val es una L minúscula. Déjame ser extenso.
② Las horas, minutos y segundos se almacenan en las tres cajas negras.
③ Las tres cajas negras usan innerHTML para poner las horas, minutos y segundos calculados.
④ La primera ejecución también es un intervalo de milisegundos, por lo que la página estará en blanco justo después de actualizar.
⑤ Es mejor adoptar el método de encapsular la función, de modo que la función se pueda llamar una vez primero para evitar el problema en blanco al actualizar la página al principio.
⑥ Cuando termine la cuenta regresiva, aparecerá la información anterior.
⑦ Optimizar, borrar temporizadorborrarIntervalo().
Realiza el diagrama de efectos:
Código
estructura basica
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>12-倒计时效果</title>
<style>
div {
margin: 200px;
}
div>span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
/* 倒计时已过小提示 先是隐藏的 */
.tisp {
display: none;
position: absolute;
top: 65px;
left: 25%;
width: 300px;
color: red;
background-color: skyblue;
line-height: 40px;
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
<div>
<span class="hour">14</span>
<span class="minute">59</span>
<span class="second">14</span>
</div>
<span class="tisp">已过倒计时时间，下次尽早~</span>
</body>
</html>
nueva fecha()
Objeto Fecha
El objeto Fecha se utiliza para trabajar con fechas y horas.
Cree un objeto Fecha: nueva Fecha ()
Para obtener más información, consulte: Fecha - Javascript | MDN
Debido a que estoy harto de fragmentos de código JavaScript, esta vez uso la carga aprendida para hacerlo debajo del cuerpo
Código:
// 以下的js语句将都会被放入到function(){}内
// 也就是function(){这里面！}
window.addEventListener('load', function(){
} )
Uso la función
parseInt() que encapsula una cuenta regresiva para obtener un número entero
. Por el bien de la belleza general, uso especialmente una expresión ternaria para agregar 0 al número debajo de 10. Ejemplo
: h = h < 10 ? '0' + S.S
Código:
window.addEventListener('load', function(){
//
var hour = document.querySelector('.hour') // 时
var minute = document.querySelector('.minute') // 分
var second = document.querySelector('.second') // 秒
// 设定目标时间格式：'YYYY-MM-DD HH:mm:ss'
var inputDate = +new Date('2022-09-23 16:54:00')
// 封装一个倒计时函数
function countDown(){
// 获取调用的时间戳
var nowData = +new Date()
// 目标时间 - 当前时间 / 1000 得到 剩余秒数
times = (inputDate - nowData)/1000
// 转化成时钟
var h = parseInt(times/60/60%24)
// 为了整体美观给10以下的数字补0
h = h < 10 ? '0' + h : h
hour.innerHTML = h
// 转化成分钟
var m = parseInt(times/60%60)
m = m < 10 ? '0' + m : m
minute.innerHTML = m
// 转化成秒钟
var s = parseInt(times % 60)
s = s < 10 ? '0' + s : s
second.innerHTML = s
}
})
En este punto, estamos a mitad de camino, pero solo se ejecuta una vez cuando se ejecuta, por lo que necesitamos usar un temporizador.
Temporizador - setInterval()
Hay dos métodos de temporizador en la ventana, y la ventana se puede omitir al llamar. La unidad de tiempo de retraso es milisegundos 1000 milisegundos = 1 segundo, que se puede omitir, y el valor predeterminado es 0 si se omite.
①setTimeout(ejecutar función, tiempo de retardo)
Si solo desea ejecutarlo una vez, puede elegir setTimeout
②setInterval(función de ejecución, tiempo de retardo)
Si desea llamar a la función continuamente, puede elegir setInterval
Necesitamos llamar a la función de cuenta regresiva continuamente, así que elegimosestablecerIntervaloPara lograr el efecto de cuenta regresiva
Código:
// 开启定时器
// 给定时器加标识符（名字）方便后续调用
var timer = setInterval(countDown,1000)
El tiempo objetivo establecido es 2022-09-23 17:50:00 Según la hora actual, todavía quedan uno o dos minutos. ¡Lo logramos! Sin embargo, los amigos cuidadosos han descubierto que habrá una breve pausa cuando empecemos a ejecutar o actualizar el efecto de cuenta regresiva.
Ejemplo de imagen del problema:
Este problema se debe a que nuestra primera ejecución también es un intervalo de milisegundos, por lo que la página estará en blanco justo después de actualizar. La solución es llamar a la función de cuenta regresiva una vez antes de iniciar el temporizador.
// 加载页面时就调用一次防止有空白
countDown()
La cuenta regresiva ha expirado
No solo deberíamos implementar el efecto de cuenta regresiva, para brindarles a los usuarios una mejor experiencia, podemos agregar otro aviso.
Código de muestra:
// times是剩余的秒数
// 如果秒数小于0 即为已过倒计时时间，则隐藏时间，显示提示语
// 需要先去获取时间的div元素和提示的div元素
// 此代码片放置在倒计时函数countDown()的最后
if (times < 0) {
div.style.display = 'none'
tisp.style.display = 'block'
// 此处还有一句
} else {
div.style.display = 'block'
tisp.style.display = 'none'
}
Representaciones de ejemplo:
Optimizar el temporizador de limpieza - clearInterval()
Mencionamos anteriormente que el temporizador setInterval() se llamará continuamente ¿Creemos que descansará cuando se acabe el tiempo? No, sigue llamando.
¡En la foto de arriba!
A pesar de que ha transcurrido el tiempo, el temporizador sigue llamando, estas veces necesitamos borrar el temporizador.borrarIntervalo()
El nombre que agregamos al temporizador anteriormente también es útil aquí.
Código de muestra:
// 此js代码片放置在判断剩余秒数是小于0内
clearInterval(timer)
Diagrama de ejemplo de código:
mire el diagrama, nuestro temporizador claro es exitoso. El temporizador ya no se llama cuando ha transcurrido la cuenta atrás.
código completo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>12-倒计时效果</title>
<style>
div {
margin: 200px;
position: absolute;
top: 65px;
left: 25%;
}
div>span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
.tisp {
display: none;
position: absolute;
top: 65px;
left: 25%;
width: 300px;
color: red;
background-color: skyblue;
line-height: 40px;
text-align: center;
font-size: 14px;
}
</style>
<script>
window.addEventListener('load', function(){
var hour = document.querySelector('.hour') // 时
var minute = document.querySelector('.minute') // 分
var second = document.querySelector('.second') // 秒
var div = document.querySelector('div')
var tisp = document.querySelector('.tisp')
// 你记得修改这个时间哟
var inputDate = +new Date('2022-09-23 18:31:00')
// 加载页面时就调用一次防止有空白
countDown()
// 开启定时器
var timer = setInterval(countDown,1000)
// 封装一个倒计时函数
function countDown(){
var nowData = +new Date()
times = (inputDate - nowData)/1000
var h = parseInt(times/60/60%24)
h = h < 10 ? '0' + h : h
hour.innerHTML = h
var m = parseInt(times/60%60)
m = m < 10 ? '0' + m : m
minute.innerHTML = m
var s = parseInt(times % 60)
s = s < 10 ? '0' + s : s
second.innerHTML = s
if (times < 0) {
div.style.display = 'none'
tisp.style.display = 'block'
clearInterval(timer)
} else {
div.style.display = 'block'
tisp.style.display = 'none'
}
}
})
</script>
</head>
<body>
<div>
<span class="hour">14</span>
<span class="minute">59</span>
<span class="second">14</span>
</div>
<span class="tisp">已过倒计时时间，下次尽早~</span>
</body>
</html>