Índice
5. Exibição de código completo
1. Ideias principais
1. Obtenha a nova data de hora atual instanciando o objeto de data por meio da função de hora integrada.
2. Como o tempo não pode ser subtraído do tempo, números negativos podem ser gerados, portanto, o método de registro de data e hora é usado para obter o tempo restante em milissegundos e, em seguida, o tempo restante é convertido no formato de dias, horas, minutos e segundos .
3. Finalmente, atribua o conteúdo obtido à variável definida.
Dois, estilo css
Principalmente para o conteúdo ficar bonito na página, um pouco de embelezamento.
<style>
p{
font-size: 36px;
margin: 0 auto;
text-align: center;
line-height: 500px;
}
span{
color: red;
}
</style>Três, código html
Define um formato padrão para variáveis de definição de importação de JavaScript.
<p>倒计时：<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>Quatro, conteúdo js
1. Primeiro pegue todas as tags nos spans no html e use querySelectorAll para obtê-las.
2. Use a tag endTime para definir a hora final e atribuir um valor à hora final.
3. Da mesma forma, use a tag newTine para definir a tag final.
4. Defina diffTime para obter o horário final menos os milissegundos obtidos pelo horário atual.
5. A tag getTime é usada principalmente para converter o tempo adquirido em milissegundos.
6. Dividir por 1000 é converter milissegundos em segundos adiantados.
var spans = document.querySelectorAll('span');
var endTime = new Date ('2022-10-1 12:00:00').getTime();
var newTime = new Date ().getTime();
var diffTime = (endTime-newTime)/1000;1. Defina dia, hora, min, sen para definir os dias, horas, minutos e segundos da contagem regressiva.
2.parseInt é usado para converter o valor obtido em um formato inteiro.
3. Use os segundos/60 obtidos para obter quantos minutos, depois/60 para obter quantas horas e/24 para obter quantos dias.
4.hour/60/60%24: Use o tempo obtido para dividir o número grande por 24 e pegue o restante para obter quantas horas, minutos e segundos são necessários.
var day = parseInt(diffTime/60/60/24);
var hour = parseInt(diffTime/60/60%24);
var min = parseInt(diffTime/60%60);
var sen = parseInt(diffTime%60);Atribua o dia, hora, minuto e segundo obtidos à tag span definida anteriormente por meio do método innerText.
spans[0].innerText = day;
spans[1].innerText = honur;
spans[2].innerText = min;
spans[3].innerText = sen;Por fim, defina o conteúdo de todo o JavaScript em uma função e chame toda a função no cronômetro para obter o efeito de contagem regressiva.
showTime é o nome da função que defini e 1000 significa que a função será alternada uma vez a cada 1000 milímetros.
setInterval(showTime,1000)5. Exibição de código completo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
font-size: 36px;
margin: 0 auto;
text-align: center;
line-height: 500px;
}
span {
color: red;
}
</style>
</head>
<body>
<p>倒计时：<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>
<script>
function showTime() {
var spans = document.querySelectorAll('span');
var endTime = new Date('2022-10-1 12:00:00').getTime();
var newTime = new Date().getTime();
var diffTime = (endTime - newTime) / 1000;
var day = parseInt(diffTime / 60 / 60 / 24);
var honur = parseInt(diffTime / 60 / 60 % 24);
var min = parseInt(diffTime / 60 % 60);
var sen = parseInt(diffTime % 60);
spans[0].innerText = day;
spans[1].innerText = honur;
spans[2].innerText = min;
spans[3].innerText = sen;
}
setInterval(showTime, 1000)
</script>
</body>
</html>6. Exibição de efeito
