JS를 사용하여 시간이 지남에 따라 페이지 배경이 변경되는 효과 얻기

이 글은 시간에 따라 페이지 배경이 바뀌는 효과를 얻을 수 있는 JS 코드에 대한 관련 정보를 주로 소개합니다. 매우 좋고 참고할만한 가치가 있습니다. 필요하신 분들은 함께 읽어보세요

1.
때때로 페이지의 표시 효과를 풍부하게 하기 위해 페이지를 시간에 따라 페이지 배경이 바뀌는 스타일로 만들어서 보는 이로 하여금 웹사이트에 지루함을 느끼지 않게 하는 동시에 또한 웹사이트가 매우 참신하다고 느낄 것입니다. Date 객체의 getHours() 메소드를 통해 현재 시스템 시간의 시간을 구하고, 시간대에 따라 페이지의 배경 이미지를 변경하는 예제입니다.

2. 기술 포인트
주로

JavaScript

에서 Date 객체의 getHours() 메서드를 사용하여 현재 시스템 시간의 시간을 가져온 다음 현재 시간이 지정된 시간과 일치하는지 확인합니다. 특정 기간 내에서 일치하는 경우 document 개체의 write() 메서드를 사용하여 페이지에 그림을 표시하고 그림 아래에 지정된 프롬프트 정보를 출력합니다.

3. 특정 구현
(1) now.getHours()

함수

를 사용하여 현재 시스템 시간의 시간을 가져오고 이 시간에 따라 다른 배경을 변경합니다.

<script language="javascript">
var now = new Date();
var hour = now.getHours();
if (hour >= 0 && hour <5){
document.write("<center><img src=&#39;1.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是凌晨时间"+hour+"点，祝您好梦</font>");
}
if (hour >= 5 && hour <8){
document.write("<center><img src=&#39;2.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是早上时间 "+hour+"点，祝您一天心情愉快</font>");
}
if (hour >= 8 && hour <11){
document.write("<center><img src=&#39;3.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
ocument.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是上午时间"+hour+"点，您别忘了小憩一会喝口水</font>");
}
if (hour >= 11 && hour <13){
document.write("<center><img src=&#39;4.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是中午时间"+hour+"点,记得要多吃饭 </font>");
}
if (hour >= 13 && hour < 17){
document.write("<center><img src=&#39;5.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是下午时间"+hour+"点，久坐办公室要适当起身运动一下</font>");
}
if (hour >= 17 && hour < 24){
document.write("<center><img src=&#39;6.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900>现在是晚上时间"+hour+"点，要注意早点入睡</font>");
}
</script>

(2) 다음과 같이 CSS 스타일 코드 조각을 추가합니다.

<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>

(3) 다음과 같이 CSS 스타일 코드 조각을 추가합니다.

<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>

Date 개체의 getHours() 메서드 JavaScript는 시간을 반환하며 반환 값은 23에서 23 사이의 숫자입니다. 이 Date 개체가 나타내는 순간을 포함하거나 시작하는 시간(현지 표준 시간대로 해석됨)을 나타냅니다.

위 내용은 JS를 사용하여 시간이 지남에 따라 페이지 배경이 변경되는 효과 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!