VS code-html/css/javascript
getElementByIdgetElementsByClassNamegetElementsByTagNamequerySelectorquerySelectorAll()stylevalue이미지 랜덤
0
JavaScript
목록 보기
4/4
난수 - 이미지 랜덤
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#photo{
position: absolute;
/* position을 줘서 top left 부여 가능 */
left: 500px;
top: 200px;
width: 400px;
height: 500px;
border: 10px groove gold;
}
#btnRandom{
margin-left: 400px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<input type="image" src="../flower_ani/f1.png" id="btnRandom">
<b>이미지버튼을 누르면 이미지 바뀝니다</b>
<img src="" id="photo">
<script>
//배열에 여러개 이미지 넣는다
//추가 삭제 자유로워서 갯수 고정 x
var imgArr=new Array();
imgArr.push("../연예인사진/15.jpg");
imgArr.push("../Food/2.jpg");
imgArr.push("../Food/7.jpg");
imgArr.push("../만화이미지/02.png");
imgArr.push("../Food/10.jpg");
imgArr.push("../연예인사진/20.jpg");
imgArr.push("../Food/8.jpg");
imgArr.push("../div_img/actor1.jpg");
imgArr.push("../Food/4.jpg");
imgArr.push("../연예인사진/10.jpg");
//초기이미지 얻어서 랜덤하게 초기이미지 넣기
//0~9사이의 난수 값을 얻는다
var rnd=parseInt(Math.random()*10);
//photo에 경로값을 수정해준다
var photo=document.getElementById("photo");
photo.setAttribute("src", imgArr[rnd]);
//이벤트...이미지버튼을 누르면 0~9사이의 난수 값을 얻는다.. photo에 경로 값을 수정해준다
var btn=document.getElementById("btnRandom");
btn.onclick=function(){
var rnd=parseInt(Math.random()*10);//버튼 누를때마다 랜덤번호 주는것
photo.setAttribute("src",imgArr[rnd]);
}
</script>
</body>
</html>복습문제
style 변경
document.getElementById("selwidth").onchange=function(){
//alert(this.value);
//borderStyle 선/색
//borderWidth 는 border 굵기
//border는 굵기 선 색
out.style.borderWidth=this.value+"px";
}value
<select id="selwidth" style="width: 120px;">
<!-- value를 넣는게 원칙이지만 value가 없으면 옵션 사이 값을 읽는다 -->
<option value="0">없음</option>
<option>1</option>
<option>3</option>
<option>5</option>
<option>7</option>
<option>9</option>
</select>본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<title>Document</title>
<style>
#out{
font-family: 'Cute Font';
font-weight: bold;
padding: 20px;
width: 500px;
margin-top: 50px;
border: 0px solid black;
}
</style>
<script>
window.onload=function(){
/* 버튼이벤트 클릭시 3px씩 감소 증가 되도록
9보다 작아지면 "더이상 줄일 수 없다" 후에 종료
60보다 커지면 경고 "더이상 커질 수 없다" 후에 종료
두 개의 버튼 클릭시 마다 현재 글꼴사이즈를 fsize에 출력 */
var fsize=document.getElementById("fsize");
var out=document.getElementById("out");
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
fsize.innerHTML="현재 글꼴 사이즈는 40 px 입니다";
btn1.onclick=function(){
// 스타일 변경
// 순수한 숫자만 빼주기 위해서 parseInt로 숫자만 빼고 나중에 px 붙여준다
var outsize=parseInt(out.style.fontSize);
//alert(outsize); //parseInt 줬을때와 안줬을때 차이 보기 위해서 (줬을떄:40/안줬을때:40px)
outsize-=3;
if(outsize<9)
{
alert("더이상 줄일 수 없어요");
return;
}
out.style.fontSize=outsize+"px";
fsize.innerHTML="현재 글꼴 사이즈는 "+outsize+"px 입니다";
}
btn2.onclick=function(){
var outsize=parseInt(out.style.fontSize);
outsize+=3;
if(outsize>60)
{
alert("더이상 커질 수 없어요");
return;
}
out.style.fontSize=outsize+"px";
fsize.innerHTML="현재 글꼴 사이즈는 "+outsize+"px 입니다";
}
//글자색
document.getElementById("mycolor").onchange=function(){
//alert(this.value);
out.style.color=this.value;
}
//배경색
document.getElementById("mycolor2").onchange=function(){
out.style.backgroundColor=this.value;
}
document.getElementById("selwidth").onchange=function(){
//alert(this.value);
//borderStyle 선/색
//borderWidth 는 border 굵기
//border는 굵기 선 색
out.style.borderWidth=this.value+"px";
}
}
</script>
</head>
<body>
<button type="button" id="btn1">점점작게</button>
<button type="button" id="btn2">점점크게</button>
<hr>
<div id="fsize"></div>
<b>글자색 선택:</b>
<input type="color" value="#ffccff" id="mycolor">
<br>
<b>배경색 선택:</b>
<input type="color" value="#cc00ff" id="mycolor2">
<br>
<b>테두리선 굵기선택:</b>
<select id="selwidth" style="width: 120px;">
<!-- value를 넣는게 원칙이지만 value가 없으면 옵션 사이 값을 읽는다 -->
<option value="0">없음</option>
<option>1</option>
<option>3</option>
<option>5</option>
<option>7</option>
<option>9</option>
</select>
<div id="out" style="font-size: 40px;">
오늘은 불타는 금요일입니다
</div>
</body>
</html>get/query 사용
getElementsByTagName
var divAll=document.getElementsByTagName("div");
for(var i=0;i<divAll.length;i++)
{
divAll[i].style.border='5px solid gray';
}getElementsByClassName
getElementsByClassName('','') 복수 가능
//className
var boxAll=document.getElementsByClassName('box');
for(var i=0;i<boxAll.length;i++)
{
//innerText 사용가능
boxAll[i].innerHTML="item";
}getElementById
var pinkbox=document.getElementById('pink');
pinkbox.innerText='pink box';querySelector
같은게 여러개면 제일 위가 디폴트
//querySelector 같은게 여러개면 제일 위가 디폴트
var qs=document.querySelector('div');
qs.style.backgroundColor="cadetblue";querySelectorAll
var qsall=document.querySelectorAll('div');
for(var i=0;i<qsall.length;i++)
{
qsall[i].innerText='Hello';
}style
id class 같이 있는 태그는 id 우선 적용
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* class id 같이 있어도 id 우선적용 */
.box{
width: 100px;
height: 50px;
margin: 3px;
text-align: center;
line-height: 50px;
background: purple;
color: white;
}
#pink{
background: pink;
color: black;
}
</style>
</head>
<body>
<div class="box" id="pink"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box green"></div>
<script>
//getElementsByTagName
var divAll=document.getElementsByTagName("div");
for(var i=0;i<divAll.length;i++)
{
divAll[i].style.border='5px solid gray';
}
//className
var boxAll=document.getElementsByClassName('box');
for(var i=0;i<boxAll.length;i++)
{
//innerText 사용가능
boxAll[i].innerHTML="item";
}
//id
var pinkbox=document.getElementById('pink');
pinkbox.innerText='pink box';
//querySelector 같은게 여러개면 제일 위가 디폴트
var qs=document.querySelector('div');
qs.style.backgroundColor="cadetblue";
//querySelectorAll
var qsall=document.querySelectorAll('div');
for(var i=0;i<qsall.length;i++)
{
qsall[i].innerText='Hello';
}
</script>
</body>
</html>마우스 이미지 출력
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sphoto{
width: 60px;
height: 60px;
border: 1px solid gray;
margin: 5px 5px;
cursor: pointer;
}
#photo_box{
position: absolute;
left: 100px;
top: 100px;
width: 400px;
height: 550px;
border: 2px solid gray;
padding: 10px 10px;
}
#main_photo{
position: absolute;
left: 600px;
top: 110px;
}
#large_photo{
width: 400px;
height: 500px;
border: 10px inset gray;
}
</style>
</head>
<body>
<h2>문제: 작은이미지 누르면 큰 사진에 띄울 수 있게 만들어주기</h2>
<div id="photo_box">
<!-- 35개 이미지 -->
<script>
for(var i=1;i<=35;i++)
{
if(i==23)
continue;
document.write("<img src='../쇼핑몰사진/"+i+".jpg' class='sphoto'>");
}
</script>
</div>
<div id="main_photo">
<img id="large_photo" src="../연예인사진/15.jpg">
</div>
<script>
//class 배열얻기
//var sphoto=document.getElementsByClassName('sphoto'); //방법1
//querySelector 에서는 클래스는 . 아이디는 #으로 넣어줘야함
var sphoto=document.querySelectorAll('.sphoto');
var lar=document.querySelector("#large_photo");
//반복문 안에서..마우스이벤트를 배열갯수만큼
for(var i=0;i<sphoto.length;i++)
{
sphoto[i].onmouseover=function(){
var selimage=this.getAttribute('src');
lar.setAttribute("src", selimage);
}
}
//현재 사진의 경로 얻기
//얻은 경로 사진을 id가 large_photo인 이미지에서 적용
</script>
</body>
</html>
백엔드 개발자로서 성장해 나가는 성현이의 블로그~
0개의 댓글
