<실제>
* 배경화면에서 오버워치 리그 선택 시
* 오버워치 리그 화면에서 원하는 팀을 선택 시
리그 팀을 선택하면 그에 대한 코멘트가 출력되도록 하였다.
CODE
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>오버워치 리그</title>
<link rel="stylesheet" href="design.css">
<link rel="stylesheet" href="league.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body class="league">
<div id="wish"></div>
<div class="select_league">
<script>
var i=0;
for(i=0;i<20;i++){
document.write("<button onclick='beg()' class='icon' id=b"+i+"></button>")
}
</script>
</div>
</body>
</html>+) 자바스크립트를 이용하여 클릭하면 beg() 함수가 실행되고, id가 각각 "b"+i인 버튼 20개를 한 번에 구현할 수 있었다
CSS
.league{ /*배경화면*/
background-image: url("bg3.jpg");
background-size:cover;
}
.select_league{ /*리그 코멘트 및 버튼의 위치, 투명도 설정*/
position:fixed;
text-align: center;
top:60%;
opacity:0.8;
}
.icon{ /*버튼의 크기 및 이미지 설정*/
width:100px;height:100px;
background-size:cover;
margin-right:2px;
}
#wish{ /*코멘트 위치, 크기 등 설정*/
position:fixed; top:30%;
width:100%; height:30%;
text-align: center;
font-family:"koverwatch";
font-size:50px;
}CSS_2
#b0{
background-image: url("b0.jpg"); border:none;
}
#b1{
background-image: url("b1.jpg"); border:none;
}
#b2{
background-image: url("b2.jpg"); border:none;
}
#b3{
background-image: url("b3.jpg"); border:none;
}
#b4{
background-image: url("b4.jpg"); border:none;
}
#b5{
background-image: url("b5.jpg"); border:none;
}
#b6{
background-image: url("b6.jpg"); border:none;
}
#b7{
background-image: url("b7.jpg"); border:none;
}
#b8{
background-image: url("b8.jpg"); border:none;
}
#b9{
background-image: url("b9.jpg"); border:none;
}
#b10{
background-image: url("b10.jpg"); border:none;
}
#b11{
background-image: url("b11.jpg"); border:none;
}
#b12{
background-image: url("b12.jpg"); border:none;
}
#b13{
background-image: url("b13.jpg"); border:none;
}
#b14{
background-image: url("b14.jpg"); border:none;
}
#b15{
background-image: url("b15.jpg"); border:none;
}
#b16{
background-image: url("b16.jpg"); border:none;
}
#b17{
background-image: url("b17.jpg"); border:none;
}
#b18{
background-image: url("b18.jpg"); border:none;
}
#b19{
background-image: url("b19.jpg"); border:none;
}Java Script
function beg(){
var id = event.srcElement.id;
if (id =="b11"){
wish.innerHTML="발리언트 떡상 가즈아";
}
else if(id=="b3"){
wish.innerHTML="당신의 마이웨이를 응원합니다";
}
else if(id=="b7"){
wish.innerHTML="핑꾸는 진리";
}
else if(id=="b12"){
wish.innerHTML="그렇게 많이 이겼으면 옆에 있는 초록색 팀에게도 좀 나눠줘라^^;;";
}
else if(id=="b16"){
wish.innerHTML="존버는 승리한다?";
}
else if(id=="b17"){
wish.innerHTML="존버는 승리한다!";
}
else if(id=="b19"){
wish.innerHTML="나름 응원중";
}
else{
wish.innerHTML="뭐.. 열심히 하든가";
}
}'개발 > 2018 겨울방학 WEB 프로젝트' 카테고리의 다른 글
| 2019 겨울방학 프로젝트#결과 (0) | 2019.03.08 |
|---|---|
| 2019겨울방학 프로젝트#구상 (0) | 2019.03.08 |
| 2019겨울방학 프로젝트#3 (0) | 2019.03.08 |
| 2019겨울방학 프로젝트#2 (0) | 2019.03.05 |
| 2019겨울방학 프로젝트#1 (0) | 2019.03.05 |
