(JS) 카운트 후, 특정 요소 나타나는 스크립트

Button을 누르면 카운터가 진행 된 후,
숨겨놓은 요소가 나타나게 해주는 방법에 대해 알아보도록 하겠습니다.

카운트 후, 특정 요소 나타나는 스크립트

html

container요소는 display: none으로 처리 하고, click-link를 누르면 li-title의 text가 지정한 문구로 바뀌며 카운트 다운 후, container 요소가 나타나게 됩니다.

<div class="link-info-container">
  <p id="li-title">버튼을 클릭하면 링크가 나타납니다.</p>
  <button id="click-link">버튼</button>
</div>
<div class="container">
   보여질 div 요소
  </div>
</div>

JS

이제 javascript로 해당 이벤트를 구현하면 됩니다.

 

button에 onclick 이벤트 대신에 자바스크립트 안에 직접 넣어주고 id만 사용하여 구현될 수 있도록 해줬습니다.

 

그리고 countDownDate 변수 10초 후 container의 display가 flex로 바뀌도록 style을 입혀줍니다.

const linkBtn = document.getElementById('click-link');
linkBtn.onclick = function (event) {
    startDownload();
};

function startDownload() {

    var countDownDate = new Date().setSeconds(new Date().getSeconds() + 10); //초 설정
    document.getElementById('click-link').style.display = 'none';

    var x = setInterval(function () {
        var now = new Date().getTime();

        var distance = countDownDate - now;

        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        document.getElementById('li-title').innerHTML = `다운로드 링크가 ${seconds}초 후에 나타납니다.`;

        if (distance < 0) {
            clearInterval(x);
            document.querySelector('.link-info-container').style.display = 'none';
            document.querySelector('.container').style.display = 'flex';
        }
    }, 1000);
}

CSS

이제, html에 스타일을 입혀주기만 하면 됩니다.

:root {
    --color-brand: #11856c;
}

.link-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#click-link {
    font-size: 15px;
    font-weight: 500;
    max-height: 48px;
    padding: 11px 30px;
    text-align: center;
    background: var(--color-brand);
    border-radius: 10px;
    border: none;
    font-weight: 900;
    color: white;
    transition: 0.3s all;
}

#click-link:hover {
    background: #17a788;
}

.container {
    justify-content: center;
    background: #000;
    height: 300px;
    align-items: center;
    color: #fff;
    display: none;
}

codepen에서 직접 확인해 볼 수 있습니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

GitHub - Seogun95/showLinkWithCount_JS

---

오늘은 이렇게 Button을 누르면 카운터가 진행 된 후, 숨겨놓은 요소가 나타나게 해주는 방법에 대해 알아보았습니다.

 

읽어주셔서 감사합니다🤟