자바 스크립트를 활용하여 시간에 따라 다른 이미지가 나오게 변경이 가능하다.
웹 사이트의 낮과 밤의 아이콘이나 배경을 다르게 설정할 수도 있다.
자바스크립트에는 현재의 날짜와 관련된 정보를 주는 객체가 있다. Date( )
이것을 new로 생성해서 시간을 가져오고 해당 시간을 활용하여 조건문으로 코드를 작성하면 된다.
- 날짜 관련 클래스 Date( )
- 날짜객체.getHours( )
- 만들어진 객체의 시간을 가져오는 메소드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var hour = function() {
var fname ="";
var today =new Date();
var hh = today.getHours();
if(hh>=7 && hh<=17)
{
fname="img/sun.png";
}
else
{
fname="img/moon.png";
}
document.getElementById("time").src=fname;
}
</script>
</head>
<body onload="hour()">
<img id="time" src="">
</body>
</html>
반응형
'Java Script > Java Script' 카테고리의 다른 글
| 자바스크립트 작성 방식 : inline / internal / External (0) | 2019.05.31 |
|---|---|
| JS 예제 : 접근 기기(데스크탑 / 모바일)에 따른 배경 변경 (0) | 2019.05.11 |
| JavaScript 타이머 설정 , setTimer (0) | 2019.05.11 |
| JavaScript 이벤트 ㅣ window.onload (0) | 2019.05.11 |
| JavaScript 함수 만드는 방법 (0) | 2019.05.11 |
댓글