타이머 버튼 만들기

HTML, CSS, 자바스크립트 코드를 사용해 숨겨진 버튼이 지정한 시간(초) 후에 나타나도록 만들 수 있습니다. 아래 코드는 코드 위젯에서만 작동합니다.

※ 3초 후에 버튼이 나타납니다.


1단계, 코드 편집하기

전체 코드는 우측과 같습니다. 코드는 크게 <style>로 시작하는 CSS, <p>로 시작하는 HTML, <script>로 시작하는 자바스크립트 3가지로 구성되어 있습니다. 그중 우리가 신경쓸 부분은 파란색으로 하이라이트된 값들입니다.


  1. 정렬 : 버튼을 정렬시킬 수 있습니다. left, center, right 3가지 중 하나를 입력합니다.
  2. 두께 : 버튼 텍스트의 두께를 정할 수 있습니다. normal로 바꾸면 기본으로 돌아갑니다.
  3. 텍스트 크기: 버튼 텍스트의 크기를 입력합니다. 예제의 버튼 텍스트 크기는 18px입니다.
  4. 링크 주소: 버튼을 클릭하면 이동할 주소를 입력합니다.
  5. 버튼 텍스트: 버튼 텍스트를 입력합니다.
  6. 시간: 1000당 1초라고 생각하시면 되겠습니다. 3초 후 버튼이 나오게 하려면 3000을 입력합니다.

<style>

.hiddenBlock {

    display: none;

}

</style>


<p class="hiddenBlock" style="text-align: 정렬;">

          <a style="font-weight: 두께;font-size: 텍스트 크기px;" class="btn btn-primary btn-lg" href="http://링크 주소">버튼 텍스트</a>

</p>


<script type="text/javascript">

          $(document).ready(function(){setTimeout(function(){$('.hiddenBlock').show()},시간)});

</script>

2단계, 코드 위젯에 추가하기

디자인 모드에서 코드 위젯을 추가한 다음 편집한 코드를 붙여 넣습니다. 끝으로 게시하기를 눌러 테스트해보세요.