1. Visão geral
Às vezes, para enriquecer o efeito de exibição da página, a página é transformada em um estilo que altera o plano de fundo da página de acordo com o tempo, para que o espectador não se sinta cansado do site e também sentirá que o site é feito muito novo. Este exemplo obtém o tempo atual do sistema pelo método gethours () do objeto Data e, em seguida, altera a imagem em segundo plano da página de acordo com diferentes períodos de tempo.
2. Pontos técnicos
O método Gethours () do objeto Data em JavaScript é usado para obter a hora do tempo atual do sistema e, em seguida, determinar se a hora atual atende ao período de tempo especificado dentro de um determinado período de tempo. Se ele atender, use o método write () do objeto Document para exibir uma imagem na página e produza as informações de prompt especificadas abaixo da figura.
3. Implementação específica
(1) Use a função agora.gethours () para obter a hora do tempo atual do sistema. Altere diferentes antecedentes de acordo com esse tempo. O código -chave do script JavaScript principal é o seguinte:
<Script Language = "javascript"> var agora = new Date (); var hour = agora.gethours (); if (hour> = 0 && hour <5) {document.write ("<Center> <img src = '1.jpg' width = '600' = '399'> <Center> (); =#ff9900> é o ponto de início da manhã "+hora+", desejo -lhe um bom sonho </font> ");} if (hour> = 5 && hour <8) {document.write (" <Center> <img src = '2.jpg' width = '600' alting = '39'> <Cented> "; face = cor em negrito =#ff9900> É o ponto "+hora+" da manhã, desejo -lhe um dia feliz </font> ");} if (hour> = 8 & h hour <11) {document.write (" <stent> <img src = '3.jpg' width = '600' altura = '399'> <Center> "); ocument.write (" <p> "); document.write (" <font size = 6 face = cor em negrito =#ff9900> é o tempo da manhã "+hora" <bort, não se esqueça de tirar uma soneca e beber um gole de água </font> "); src = '4.jpg' width = '600' height = '399'> <stent> "); document.write (" <p> "); document.write (" <font size = 6 face = coração de cor em negrito =#ff9900> é hora "+hora" tempo, hora de comer mais </font> "); 17) {document.Write ("<Center> <img src = '5.jpg' width = '600' altura = '399'> <Center>"); document.write ("<p>"); document.write ("<font size = 6 face = cor em negrito =#ff9900> no tempo da tarde"+"+"+"+" hora </font> "");} if (hour> = 17 && hour <24) {document.write ("<Center> <img src = '6.jpg' width = '600' height = '399'> <font>"); document.write ("<p>); Cuidado para adormecer cedo </font> ");} </script>(2) Adicione um pedaço do código do estilo CSS da seguinte forma:
<style type = "text/css"> body {background-color: #fffff;} </style>(3) Adicione um pedaço do código do estilo CSS da seguinte forma:
<style type = "text/css"> body {background-color: #fffff;} </style>O método Gethours () do objeto Data em JavaScript retorna por hora, e o valor de retorno é um número, entre 0 e 23, representando a hora do dia que contém ou inicia no momento representada por esse objeto (explicado no fuso horário local).
O exposto acima é o conhecimento relevante sobre o código JS que o editor apresentou a você para realizar o efeito de alterar os antecedentes da página de acordo com o tempo. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!