WEB.JS/08.DOM_JS

chapter11 : DOM_문제

GAWON 2023. 5. 22. 09:29 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#box{
width : 100px;
height : 100px;
color : white;
background-color :red;
text-align : center;  /*가로 방향 가운데 정렬 */
display : table-cell; /*테이블 셀로 변경하면 수직 정렬 가능 */
vertical-align : middle; /*세로 방향 가운데 정렬 */
}
#text{
font-size:16px;
font-weight:bold;
}

</style>
<script type="text/javascript">
//전역 변수
var i=0;   //증가 인덱스
var colors = ["red","orange","yellow","green","blue","navy","purple"];
var contents =["빨","주","노","초","파","남","보"];

```
onload = function() {
	rainbow();
}
function rainbow(){
	var box = document.getElementById("box");
    var text = document.getElementById("text");
    box.style.backgroundColor = colors[i];
    text.innerText = contents[i];
    i++;
    if (i >= colors.length) {
       i = 0;
    }
}

setInterval(rainbow,1000);

```

</script>
</head>
<body>
<div id="box">
<p id="text">빨</p>
</div>
</body>
</html>