728x90
반응형
1. 코드 설명
- 신호등을 HTML+CSS로 만든다.
- div를 사용해서 사각형 디비전, 원(border-radius:50%) 디비전을 만든다.
- 버튼을 만든다.
- 버튼을 클릭하면(.button:active{}) 색상이 바뀌어 사용자가 클릭했는지 알 수 있게 만든다.
- 처음 신호등 원의 색상은 회색으로 시작한다.
- 클릭하면 3초간 초록불 점등 >> 2초간 노란불 점등 >> 3초간 빨간불 점등>> 3초간 초록불 점등... 계속 반복하도록 만든다.
2. 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>신호등</title>
<style>
*{
margin: 0;
padding: 0;
}
#trafficBody{
position: relative;
width: 300px;
height: 1050px;
background-color: black;
box-sizing: border-box; /*padding때문에 늘어난 영역을 원래대로 만듬*/
margin: 0 auto; /*중앙 정렬*/
}
#trafficBody>#green>#greenCircle{
background-color: green;
}
#trafficBody>#yellow>#yellowCircle{
background-color: yellow;
}
#trafficBody>#red>#redCircle{
background-color: red;
}
.Circle{
width: 250px;
height: 250px;
border-radius: 50%;
margin: 0 auto; /*중앙 정렬*/
}
.button{
position: relative;
left: 100px;
width: 100px;
height: 100px;
margin: 100px auto;
background-color: white; /*버튼 배경 색*/
color: black; /*폰트 색상*/
font-size: 30px; /*폰트 사이즈*/
border:none; /*테두리 선 없음*/
border-radius: 10%; /*테두리 둥글게*/
}
.button:hover {
background-color:#002ead; /*마우스 위에 올렸을 때 색상 변경*/
transition: 0.7s; /*딜레이*/
}
.button:active {
background-color: #ffbf00; /*클릭하면 색상 변경*/
}
</style>
<script>
window.onload = function() {
var DivGreen = document.getElementById('greenCircle');
var DivYellow = document.getElementById('yellowCircle');
var DivRed = document.getElementById('redCircle');
function initLight() {
DivGreen.style.backgroundColor = 'gray';
DivYellow.style.backgroundColor = 'gray';
DivRed.style.backgroundColor = 'gray';
}
function cycleLights() {
initLight(); // 초기에 모든 신호등을 회색으로 변경
setTimeout(function() { DivGreen.style.backgroundColor = 'green'; }, 0); // 초록불
setTimeout(function() { initLight(); DivYellow.style.backgroundColor = 'yellow'; }, 3000); // 노란불
setTimeout(function() { initLight(); DivRed.style.backgroundColor = 'red'; }, 5000); // 빨간불
setTimeout(initLight, 7000); // 다시 회색으로
}
window.run = function() {
cycleLights(); // 최초 실행
setInterval(cycleLights, 7000); // 7초마다 반복
}
}
</script>
</head>
<body>
<div id = "trafficBody">
<li id="green"><div id="greenCircle" class="Circle">초록색</div></li>
<li id="yellow"><div id="yellowCircle" class="Circle">노란색</div></li>
<li id="red"><div id="redCircle" class="Circle">빨간색</div></li>
<button onclick="run()" class="button">Run!</button>
</div>
</body>
</html>- window.onload
- 웹 페이지가 완전히 로드되고 초기화된 후에 실행되는 이벤트 핸들러
- DOM 요소에 접근하거나 조작해야 하는 스크립트에서 중요한 역할
- DivGreen, DivYellow, DivRed가 전역 변수로 쓰였기 때문에 사용한다.
- setTimeout(함수, 지연할 시간);
- 함수는 인자에 들어간 함수가 실행 할 때까지 지연할 시간을 지정할 수 있다.
- 시간은 ms 단위이다.
- 지연할 시간에 3000이 들어간다면, 3000ms 후에 해당 메서드를 실행한다.
- setInterval(함수, 반복할 시간);
- 함수는 인자에 들어간 함수를 반복할 시간마다 계속해서 반복한다.
- 시간은 ms단위이다.
- 반복할 시간에 7000이 들어간다면, 7000ms 마다 해당 메서드를 반복해 실행한다.
3. 실행 결과
초록색
노란색
빨간색
댓글