A chave para implementar esse efeito é o uso de objetos de data e Settimeout.
Existem três exemplos no total. A estrutura HTML é a seguinte, portanto, nenhum estilo CSS é adicionado.
<body> Tempo atual: <p id = "p1"> </p> Exame de admissão na faculdade contagem regressiva: <p id = "p2"> </p> Rush de tempo limitado: <p id = "p3"> </p> </body>
Entender principalmente a implementação do JavaScript
window.onload = function () {var p1 = document.getElementById ("p1"), p2 = document.getElementById ("p2"); p3 = document.getElementById ("p3"); ShowTime1 (); ShowTime2 (); ShowTime3 ();}1. Implementação simples da tela atual
function showtime1() { var nowdate=new Date();//Create the Date object nowdate to get the current time var year=nowdate.getFullYear(),//Get year month=nowdate.getMonth()+1,//Get month, getMonth() gets 0-11, and you need to add 1 date=nowdate.getDate(),//Get the day of the week, getDay() gets 0-6 Semana = ["domingo", "segunda -feira", "terça -feira", "quinta -feira", "sexta -feira", "sábado", h = agoradate.gethours (), m = agoradate.getMinutes (), s = agoradate.getSeconds (), h = checktime (h), // função de check é usada para formatação, minutos, segundos m; p1.innerhtml = ano+"ano"+mês+"mês"+data+"dia"+semana [dia]+h+":"+m+":"+s; setTimeout (ShowTime1, 1000); // Repita a própria função}A função de checktime é a seguinte:
função checktime (i) {if (i <10) {i = "0"+i; } retornar i;}Como o formato de tempo que você costuma ver é geralmente 00:00:01, e Gethours, GetMinutes, GetsEconds obtém formatos de 0 a 9, não 00 a 09. Portanto, no processo de mudança de 9 para 10, há um único dígito que se torna um dígito duplo e também se torna 0 quando a carga é de 59 segundos para 0 segundos ou 59 minutos para 09 minutos e também 23 minutos.
Por exemplo, 23:59:59 devem mudar para 00:00:00 no próximo segundo; Se a função de tempo de verificação não for usada para processamento, ela mudará para 0: 0: 0, o que tornará o formato um pouco inconsistente e também há mutações visuais de contagem de palavras aumentadas ou decrescentes. (Os próximos dois exemplos não usam a função de check -wtime para processar o tempo, minuto e segundo !!!)
2. O efeito da contagem regressiva do exame de entrada da faculdade é realizado
function ShowTime2 () {var noyTime = new Date (), // Obtenha o horário atual final = new Date ("2017/6/6"); // Defina o tempo de término VAR LeftTime = EndTime.getTime ()-Nowtime.Gettime (1000, // Os milissegundos do final da hora esquerda = Math.FOOR (LeftTime/(1000****60*60*60*60*60* leftth = math.floor (esquerda/(1000*60*60)%24); setTimeout (ShowTime2, 1000); }Entre eles, os pontos mais importantes:
① Definir o fim do horário final = new Date ("2017/6/6") é usar o novo objeto Data com parâmetros, e diretamente o New Date () é obter diretamente o horário atual;
② O método gettime () obtém o número de milissegundos a partir de 1º de janeiro de 1970.
③ Cálculo de dias, horas, minutos e segundos, % (operação do Modulo). Obtenha os milissegundos (milissegundos restantes) a partir do horário de término, divida por 1000 para obter os segundos restantes, dividir por 60 para obter os minutos restantes e dividir por 60 para obter as horas restantes. Dividido por 24 para obter os dias restantes. Os segundos restantes do Módulo de esquerda/1000 60 recebem o número de segundos, os minutos restantes da hora da esquerda/(1000*60) Módulo 60 recebe o número de minutos, as horas restantes da hora esquerda/(1000*60*60) Módulo 24 recebe o número de horas.
3. Efeito contagem regressiva da compra de tempo limitado
function ShowTime3 () {var nowNeTime = new Date (), endtime = new Date ("2020/1/1,00: 00: 00"), // Defina o horário final esquerdo = parseInt ((endtime.gettime ()-nowttime.gettime ())/1000), d = Math.FOOR ((60*60*24)) M = Math.Floor (LeftTime/60%60), S = Math.Floor (LEFTTime%60); p3.innerhtml = d+"dia"+h+"hora"+m+"minuto"+s+"segundo"; setTimeout (ShowTime3, 1000); }De fato, é semelhante ao segundo exemplo, a diferença é que o horário de término é definido uma nova data ("2020/1/1,00: 00: 00")
Abaixo está o código completo
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Efeito contadown </ititle> <script type = "text/javascript"> function checktime (i) {if (i <10) {i = "0"+i;; } retornar i; } window.onload = function () {var p1 = document.getElementById ("p1"), p2 = document.getElementById ("p2"); ShowTime1 (); ShowTime2 (); ShowTime3 (); } function ShowTime1 () {var nowDate = new Date (); var ano = nowDate.getlyear (), // ano mês = agoradate.getMonth ()+1, // data do mês = agoradate.getdate (), // dia da semana = ["domingo", "segunda-feira", "terça-feira", "quinta-feira", "sexta-feira", "sábado"], day = agoradate.getday ", // m = agoradate.getminutes (), m = checktime (m), s = agoradate.getSeconds (), s = checkTime (s); p1.innerhtml = ano+"ano"+mês+"mês"+data+"dia"+semana [dia]+h+":"+m+":"+s; setTimeout (ShowTime1, 1000); } function ShowTime2 () {var nowNeTime = new Date (), endtime = new Date ("2017/6/6"); var de esquerda = endtime.getTime ()-nowtime.getTime (), leftD = math.floor (lesftime/(1000*60*60*24)), esquerda = math.floor (lesfttime/(1000*60*60), 60)%24), Mathf = Math.floor (LEFTTime/(1000*60). p2.innerhtml = leftd+"dia"+lefth+":"+leftm+":"+esquerda; setTimeout (ShowTime2, 1000); } function ShowTime3 () {var nowNeTime = new Date (), endtime = new Date ("2020/1/1,00: 00: 00"), esquerda tempo = parseint ((endtime.get.gettime ()-nowsTime.getTime ())/1000), d = math.floor (lefttime/(60*60*24)), H M = Math.Floor (LeftTime/60%60), S = Math.Floor (LEFTTime%60); p3.innerhtml = d+"dia"+h+"hora"+m+"minuto"+s+"segundos"; setTimeout (ShowTime3, 1000); } </script> </ad Head> <body> Tempo atual: <p id = "p1"> </p> Exame de admissão na faculdade contagem regressiva: <p id = "p2"> </p> Rush de tempo limitado: <p id = "p3"> </p> </body> </html>A implementação de efeitos especiais JavaScript acima - um exemplo simples do efeito atual e da contagem regressiva é todo o conteúdo que compartilhei com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.