1. 설명
- 버튼을 클릭하면 현재시간을 보여주고,
초가 짝수인지 홀수인지에 따라 배경색이 달라진다. - Date 객체 이용하여 시, 분, 초 가져오기
- Date 객체 생성 :
const date = new Date(); - 시간 가져오기 :
let hour = date.getHours(); - 분 가져오기 :
let minute = date.getMinutes(); - 초 가져오기:
let second = date.getSeconds();
- Date 객체 생성 :
- document.querySelector("#spanTime") :
id가 spanTime인 요소를 가져온다. - innerHTML : 콘텐츠를 수정하고 싶을 때 사용한다.
- document.body : body를 찾는다.
(객체를 찾으면 style등등 값을 바꿔줄 수 있다.)
2. 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>초에 따라 배경색 바꾸기</title>
<script>
//버튼을 클릭할 때 변화
function change(){
const date = new Date();
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
//초가 짝수일때 홀수일때 배경색을 다르게 준다.
second % 2 === 0 ? (document.body.style.backgroundColor = "red") : (document.body.style.backgroundColor = "lightblue");
let spanTime = document.querySelector("#spanTime");
spanTime.innerHTML = `현재시간보이기 : ${hour}시 ${minute}분 ${second}초`;
}
</script>
</head>
<body>
<h1>배경색 바꾸기 </h1>
<hr>
<fieldset>
<legend>초에 따라 배경색 바꾸기</legend>
<span id="spanTime">현재시간보이기 : 14시 9분 56초</span>
<button type="button" onclick="change()">배경색바꾸기, 시간보이기 이벤트</button>
</fieldset>
</body>
</html>3. 결과
