1. 개요
때로는 페이지의 디스플레이 효과를 풍부하게하기 위해 페이지가 시간에 따라 페이지 배경을 변경하는 스타일로 만들어 지므로 뷰어가 웹 사이트에 지치지 않고 웹 사이트가 매우 새로운 것으로 느껴질 것입니다. 이 예제는 날짜 개체의 gethours () 메소드에 의해 현재 시스템 시간을 얻은 다음 다른 기간에 따라 페이지의 배경 이미지를 변경합니다.
2. 기술 포인트
JavaScript의 날짜 객체의 Gethours () 메소드는 현재 시스템 시간의 시간을 얻은 다음 현재 시간이 특정 기간 내에 지정된 기간을 충족하는지 여부를 결정합니다. 만나면 문서 개체의 쓰기 () 메소드를 사용하여 페이지에 그림을 표시하고 그림 아래에 지정된 프롬프트 정보를 출력하십시오.
3. 특정 구현
(1) now.gethours () 함수를 사용하여 현재 시스템 시간의 시간을 얻습니다. 이 시간에 따라 다른 배경을 변경하십시오. 기본 JavaScript 스크립트의 키 코드는 다음과 같습니다.
<script language = "javaScript"> var now = now = new date (); var Hour = now.gethours (); if (Hour> = 0 && hour <5) {document.write ( "<center> <img src = '1.jpg'width = '600'height = '399'> <central>"; docum =#ff9900> 이른 아침 시간 "+시간+"포인트입니다. 좋은 꿈을 기원합니다 </font> ");} if (Hour> = 5 && hour <8) {docum face = bold color =#ff9900> 아침의 "+시간+"포인트입니다. 행복한 날을 기원합니다 </font> ");} if (hour> = 8 && hour <11) {document.write ("<center> <img src = '3.jpg'width = '600' 높이 = '399'> <center> "); ocument.write ("<p> "); docum src = '4.jpg'width = '600'height = '399'> <center> "); document.write ("<p> "); document.write ("<font size = 6 face = bold color =#ff9900> 정오 시간 "+hour+"time, 더 많이 먹는 것을 기억하십시오 </font> "); 17) {document.write ( "<center> <img src = '5.jpg'width = '600'height = '399'> <center>"); document.write ( "<p>"); docum 시간 </font> ");} if (시간> = 17 && 시간 <24) {docum 일찍 잠들도록 조심하십시오 </font> ");} </script>(2) 다음과 같이 CSS 스타일 코드를 추가하십시오.
<스타일 유형 = "text/css"> body {background-color : #fffff;} </style>(3) 다음과 같이 CSS 스타일 코드를 추가하십시오.
<스타일 유형 = "text/css"> body {background-color : #fffff;} </style>JavaScript의 날짜 객체의 Gethours () 메소드는 한 시간을 반환하며, 반환 값은 0에서 23 사이의 숫자이며,이 날짜 객체로 표시되는 순간에 시작하거나 시작하는 날의 시간을 나타냅니다 (현지 시간대에 설명).
위는 편집자가 시간에 따라 페이지 배경을 변경하는 효과를 실현하기 위해 편집자가 소개 한 JS 코드에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!