반응형
1. to do list 복습
JS 부분만 안보고 치기
2번 했는데 2번 틀림
1) delBtn.setAttribute='class', 'delbtn'; (x) -> delBtn.setAttribut=('id','delbtn');
2) appenChild -> appendChild
3) parentNode
4) delBtn.onclick=function(){
list.removeChild(this.parentNode);}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
a{
text-decoration: none;
}
#header{
width:100%;
height:200px;
background:rebeccapurple;
padding:30px;
box-sizing: border-boxs;
}
#headertop{
text-align:center;
padding:30px;
}
#headertop>h1{
color:white;
font-size:40px;
}
#headerbottom{
text-align: center;
padding:30px;
}
#textbox{
width:200px;
height:20px;
border:1px solid darkgray;
border-radius: 5px;
text-align: center;
color:grey;
}
#btn{
width:20px;
height:20px;
border-radius: 20px;
border:1px solid darkolivegreen;
text-align: center;
font-size:12px;
cursor:pointer;
}
#bottom{
text-align: center;
line-height:3;
margin-top:30px;
}
#delbtn{
width:20px;
height:20px;
margin-left:20px;
background-color:darkorange;
color:white;
text-align: center;
border-radius: 15px;
}
</style>
</head>
<body>
<div id ="wrap">
<div id="header">
<div id="headertop">
<h1>to do list</h1>
</div>
<div id="headerbottom">
<input text id="textbox" value=""
onkeyup="if(window.event.keyCode==13){add()}">
<input button id="btn" value="+" onclick="add();">
</div>
</div>
<div id="bottom">
<ul id="bottom_content">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script>
function add(){
textbox=document.querySelector('#textbox');
list=document.querySelector('#bottom_content');
li=document.createElement('li');
li.innerHTML=textbox.value;
list.appendChild(li);
delBtn=document.createElement('button');
delBtn.innerHTML='-';
delBtn.setAttribute('id','delbtn');
li.appendChild(delBtn);
delBtn.onclick=function(){
list.removeChild(this.parentNode);
}
}
</script>
</body>
</html>2. 움직이는 배너
bannerimg.item(i). 을 까먹음
clearInterval(banner) X-> clearInterval(rolling);
n=index; X -> index=n; (위치에 ㄸㅏ라서 해석이 달라짐 **)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0;padding:0;}
a{text-decoration: none;}
ul,li{list-style: none;}
img{display:block;line-height:0;}
#banner{position:absolute;top:300px;}
#banner>ul>li{position:absolute;top:0;display:none;}
#banner>ul>li.fadein{animation:fadein 2s;}
@keyframes fadein{
from{opacity:0;}to{opacity:1;}
}
#banner>ul>li.on{display:block;}
#bannerBtn>ul>li{float:left;font-size: 20px; font-weight:bold;padding:20px;}
</style>
</head>
<body>
<div id="banner">
<ul class="bannerImg">
<li class="fadein "><img src="../images/image1.png"></li>
<li class="fadein "><img src="../images/image2.png"></li>
<li class="fadein"><img src="../images/image3.png"></li>
<li class="fadein"><img src="../images/image4.png"></li>
<li class="fadein"><img src="../images/image5.png"></li>
</ul>
</div>
<div id ="bannerBtn">
<ul>
<li onclick="btn(0)">btn1</li>
<li onclick="btn(1)">btn2</li>
<li onclick="btn(2)">btn3</li>
<li onclick="btn(3)">btn4</li>
<li onclick="btn(4)">btn5</li>
</ul>
</div>
<script>
var index=0;
var rolling;
banner(0);
function banner(n){
bannerimg=document.querySelectorAll('.bannerImg>li');
if(index>=bannerimg.length){
index=0;
}
if(n != undefined){
index=n;
}
for(i=0; i<bannerimg.length; i++ ){
if(i==index){
bannerimg.item(i).setAttribute('class','fadein on');
} else{
bannerimg.item(i).setAttribute('class','fadein');
}
}
index++;
}
function btn(n){
clearInterval(rolling);
banner(n);
rolling=setInterval(banner,2000);
}
rolling=setInterval(banner,2000);
</script>
</body>
</html>
반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [10일차 연습] 경일게임아카데미 홈페이지 만들기 (0) | 2021.03.28 |
|---|---|
| [10일차]20210326 여태까지 배운거 적용해서 경일게임아카데미 홈페이지 만들기 (0) | 2021.03.26 |
| [9일차]20210325 움직이는 배너 함수 적용 (0) | 2021.03.25 |
| [8일차 연습] moving clock, return, document.getElementsByClassName, for, if, getElementsByClassName, Math.floor / Math.random (0) | 2021.03.25 |
| [8일차]20210324 object, 함수 method 직접 찾아 적용하기 (0) | 2021.03.24 |
