list 표 모양을 바꿔주려면 list-style 속성을 이용해야한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>공부하자</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<style>
.box1{
border-radius: 10px;
border: 2px solid #73ad21;
background-color: #73ad21;
padding: 10px;
margin: 10px;
width: 600px;
height: 20px;
color: white;
text-align: center;
}
.box2{
border: 2px solid grey;
box-sizing: border-box;
width: 280px;
height: 50px;
padding-top: 10px;
margin-left: 15px;
text-align: center;
float: left;
}
.box3{
border: 2px solid grey;
box-sizing: border-box;
width: 325px;
height: 50px;
margin-left: 15px;
padding-top: 12px;
text-align: center;
float: left;
}
.box4{
clear:both;
}
.search{
padding-left: 10px;
float: left;
width: 280px;
}
#songname{
height: 20px;
}
p{
width: 220px;
}
.box5{
width: 320px;
text-align: center;
margin-left: 20px;
float: left;
margin-top: 10px;
height: 90px;
}
#list{
margin-top: 180px;
width: 300px;
height: 300px;
}
#list>p{
border: solid 2px #73ad21;
width: 300px;
text-align: center;
border-radius: 25px;
background-color: #73ad21;
color: white;
}
.ol{
border: 2px solid #73ad21;
height: 200px;
}
.li{
border-bottom: 1px solid rgb(153, 151, 151);
list-style: disc;
list-style-position : outside;
}
</style>
<script>
$(document).ready(function(){
var dict = {}; //dictionary for list
//enter 이벤트
$(".songname").keydown(function(key){
var url = ""; //url 초기화
if (key.keyCode == 13) {
url = $(".url_address").val();
url = url.split("=");
url = url[1].split("&");
url = url[0];
$(".box5").html("<iframe id='video' class='video' width='325' height='100 ' src='https://www.youtube.com/embed/"+url+"?rel=0;amp;autoplay=1' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>");
//노래재생 list에 제목 넣기
var songname = $(".songname").val();
$(".ol").append("<li class='li'>"+songname+"</li>");
//dict 추가
dict[songname] = url;
//주소입력창,노래제목입력 초기화
$(".url_address").val("");
$(".url_address").removeAttr("placeholder");
$(".songname").val("");
$(".songname").removeAttr("placeholder");
}
//더블클릭시 , 유트브 재생
$(".li").dblclick(function(){
var text = $(this).text();
var id = dict[text];
$(".box5").html("<iframe id='video' class='video' width='325' height='100 ' src='https://www.youtube.com/embed/"+id+"?rel=0;amp;autoplay=1' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>");
});
})
});
</script>
</head>
<body>
<div class="box1">유투브 노래 듣기</div>
<div class="box2" id="d1">노래재생</div>
<div class="box3" id="d2">현재재생목록</div>
<div class="box4"></div>
<form class="search">
<p > <유투브 url주소입력> </p>
<input type="text" name="songname" class="url_address" size=25 placeholder="ex)https://www.youtube.com/watch?***" >
<input type="button" value="ENTER" class="sendbox">
<p><노래제목입력></p>
<input type="text" name="songname" class="songname" size=25 placeholder="ex)이누야샤ost" >
<input type="button" value="ENTER" class="sendbox">
</form>
<div class="box5"> </div>
<div id="list">
<p>
노래재생list
</p>
<div>
<ol class="ol"></ol>
</div>
</body>
</html>
'프로그래밍 언어 > Java' 카테고리의 다른 글
| java 개발환경 설정 하는방법 (0) | 2021.10.03 |
|---|---|
| 안드로이드 스튜디오<button> background 적용 안되는 오류 해결 (0) | 2021.10.01 |
| Jqeury 예제5.카드게임 구현하기 (0) | 2020.10.10 |
| 자바스크립트 jquery 예제4.지뢰찾기게임 (0) | 2020.10.06 |
| jqeury 예제3. 가위바위보 게임만들기 (0) | 2020.09.30 |