반응형
to do list
<!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');
textList=document.querySelector('#bottom_content');
li=document.createElement('li');
li.innerHTML=textBox.value;
textList.appendChild(li);
delBtn=document.createElement('button');
delBtn.innerHTML='-';
delBtn.setAttribute('id', 'delbtn');
li.appendChild(delBtn);
delBtn.onclick=function(){
textList.removeChild(this.parentNode);
}
}
</script>
</body>
</html>moving clockd 방법 1
<!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;
}
li{
list-style: none;
width: 200px;
height: 200px;
background: yellowgreen;
float: left;
}
.container{
width: 200px;
height: 200px;
overflow: hidden;
}
.visual_box{
width: 600px;
height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<div id="root">
<div class="container">
<ul class="visual_box">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</div>
<script>
/* 시계
function timer(){
date = new Date();
time = date.toLocaleTimeString();
document.querySelector("#root").innerHTML = time;
}
setInterval(timer,1000);
*/
function moving(){
box = document.querySelector('.visual_box');
li = document.querySelector('li');
box.removeChild(li);
box.appendChild(li);
}
setInterval(moving,1000);
</script>
</body>
</html>방법2
<!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>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="silder">
<ul id="banner" class="visual">
<li><img src="./images/1.png"></li>
<li><img src="./images/2.png"></li>
<li><img src="./images/3.png"></li>
<li><img src="./images/4.png"></li>
<li><img src="./images/5.png"></li>
</ul>
</div>
<script type="text/javascript">
function banner(){
banner = document.querySelector('#banner');
li = document.querySelectorAll('#banner > li');
banner.appendChild(li[0]);
}
setInterval(banner,5000);
</script>
</body>
</html>이렇게 간단하다니.....,.,,,.,.,. 나와 짝꿍은 한 30줄 쓰구도 실 패...
반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [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 |
| [7일차]20210323 to do list 삭제 (0) | 2021.03.23 |
| 6일차 공부한 내용 정리 및 복습 -JS 조건문, 반복문, 변수, boolean, 색변경 등등 (0) | 2021.03.22 |
| [7일차]20210322 JavaScript 기초 / 조건문/반복문/제어문/등등.. (0) | 2021.03.22 |
