2021. 6. 7. 22:56ㆍJava Script
이번에는 java script 를 이용해서 팝업을 띄우는 방법 과, 인터벌 ( 일정 주기로 실행되는 함수 ) 에 대해서 알아 봅시다.
팝업
팝업은, 특정 주소로 새로운 브라우저 창을 열어주는 것을 의미 합니다.
window.popup 을 사용하면 됩니다.
특정 버튼을 클릭 했을 때, 특정 태그를 클릭 했을 때 등등 .... 원하는 페이지를 팝업으로 띄워주면 됩니다.
팝업을 띄워줄 때, width(넓이), heigth(높이), 위치 (left, top) 을 설정할 수 있습니다.
이미 존재하고 있는 페이지가 아닌, 내가 만들은 파일을 띄우고 싶다면, 경로를 적어주면 됩니다.
만약, 새로운 창을 열고, 현재 창을 닫고 싶다면 이어서 window.close() 를 써주면 됩니다.
팝업에 대해서는 이 정도면 알면 될 것 같습니다.
인터벌
인터벌은 특정 주기로 만들어 놓은 함수를 실행시킬 수 있습니다.
setInterval( 실행할 함수, 실행주기(밀리초) )
위의 코드는 aa 라는 함수를 1초 마다 실행을 하게 됩니다.
실행함 함수 자리에, 바로 익명 함수를 넣어줄 수 있습니다.
이렇게 계속 실행이 되도록 Interval 을 설정을 했다면, 설정한 Interval 을 중지 할 수도 있습니다.
clearInterval( 중지할 인터벌 )
중지할 인터벌 을 넣어주기 위해서, setInterval 앞에 변수를 선언해서 Interval 을 대입해 줍니다.
그런 후에, sestInterval 을 대입한 변수를 clearInterval 에 넣어 줍니다.
인터벌의 중지는 특정 조건에서 실행되도록 해줍니다. ex) if문 , 버튼 클릭 등등
예제. 일정시간마다 사진 바꾸기.
위에서 알아본, 인터벌을 이용해서 일정시간마다 사진을 바꿔 볼 건데요,
사진의 src 경로를 그냥 바꾸게 되면, 애니메이션 효과(생성될 때 적용) 등이 적용 되지 않기 때문에 <img> 태그를 만들어서 특정 태그에 appendChild 를 이용해서 넣어줍니다.
먼저, <style> 과 <body>에 이미지가 들어갈 자리를 만들어 줍시다.
<style>
.bgImg {
animation: fadeIn 1s linear;
}
@keyframes fadeIn {
from {
opacity: 0;
} to {
opactiy: 1;
}
}
</style>
<div class="slide">
<img src="img/slide1.jpg" class="bgImg">
</div>
1. img 를 생성하고 조립. img를 조립할때, 이미지의 순서를 변수로 만들어서 ++ 를 해줍니다.
2. 기존에 있던 이미지를 삭제합니다.
3. 만들어 둔 이미지를 추가합니다.
4. 더이상 변경할 사진이 없다면, 이미지의 순서를 처음으로 만들어준다.
이렇게 다 만들었다면, 해당하는 함수를 Interval 로 만들어 주는데, 이 때, 즉시실행함수를 사용하는 게 좋다고 합니다.
※ 함수 실행의 순서를 위해서
문제 1. 이미지를 위에서 부터 하나씩 내려오게 할 것.
-틀-
<style>
.main-banner {
background: linear-gradient(90deg, #0c151c 1.3125rem, transparent 1%) 50%, linear-gradient(#0c151c 1.3125rem, transparent 1%) 50%, #263747;
background-size: 1.5rem 1.5rem;
padding: 6rem 0;
color: #fff;
text-align: center;
}
<style>
<div class="main-banner">
<img src="img/1.jpg" width="300">
<img src="img/2.jpg" width="300">
<img src="img/3.jpg" width="300">
<img src="img/4.jpg" width="300">
</div>이미 생성되어 있는, img 들을 none 처리 합니다.
위에서 예제로 했던 이미지를 바꾸는 것과 비슷하게, 차례대로 display: inline 으로 바꾸어 주면 됩니다.
그리고, 이미지의 마지막에 도달했다면, 인터벌을 종료해주면 되겠죠?
이미지를 위에서 내려오게 하는 방법은 2가지가 있습니다.
1. position 을 이용하기 ( 자기 자신한테 relative 를 걸어서, top 을 이동시킴 )
2. transform: translateY 를 이용하기.
사용하고 싶은 걸로 사용하면 됩니다.
문제2. 1초마다 시간이 현재시간으로 변경되는 타이머와 변경되는 배경
예제와 문제를 이해했다면, 쉽게 풀어볼 수 있는 문제 입니다.
<style>
* {margin: 0; padding: 0;}
.bgImg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
animation: fadeIn 1s ease-in-out;
}
.timer {
color: white;
}
@keyframes fadeIn{
from{
opacity: 0.5;
} to{
opacity: 1;
}
}
</style>
<body data-img ='{"1": "img/1.jpg", "2": "img/2.jpg", "3": "img/3.jpg", "4": "img/4.jpg"}'>
<div class="timer">
<h2>타이머</h2>
<h2 class="clock"></h2>
</div>
<script>
// 시간처리함수
var clock = document.querySelector(".clock");
function createTime() {
var date = new Date(); /* 현재날짜 */
var hour = date.getHours();
var min = date.getMinutes();
var second = date.getSeconds();
var time = (hour < 10 ? "0" + hour : hour) + ":"+
(min < 10 ? "0" + min : min) + ":" +
(second < 10 ? "0" + second : second);
clock.innerHTML = time;
}
// 이미지처리함수
var count = 0; // 초기값 0
var dataImg = JSON.parse(document.body.dataset["img"]);
function createImg() {
var img = document.createElement("img");
img.src = dataImg[++count];
img.classList.add("bgImg");
document.body.appendChild(img);
if(count == 4) count = 0;
}
(function() {
createTime();
setInterval(createTime, 1000);
createImg();
setInterval(createImg, 3000);
})();
</script>'Java Script' 카테고리의 다른 글
| Day79 - [js]location, history, navigator (0) | 2021.06.09 |
|---|---|
| Day78 - [js]타임아웃, 매개변수 넣기 (0) | 2021.06.07 |
| Day77 - [js]form 객체 , 날짜 (0) | 2021.06.05 |
| Day77 - [js]이벤트중단, dataset, 토글탭 (0) | 2021.06.05 |
| Day76 - [js]이벤트위임을 활용한 여러개의 버튼 (0) | 2021.06.03 |