자바스크립트로 디데이 출력하기

단기 프로젝트에서 디데이를 출력하는 자바스크립트 코드를 짜게되어서 사용한김에 포스팅 하려함

코드

HTML

<div id="d-day"></div>

JavaScript

//디데이 종료 일자 설정
var countDownDate = new Date("May 9, 2017 06:00:00").getTime();

//1초마다 갱신되도록 함수 생성,실행
var x = setInterval(function() {
    // 오늘 날짜 등록
    var now = new Date().getTime();

    // 종료일자에서 현재일자를 뺀 시간
    var distance = countDownDate - now;

    // 각 변수에 일, 시, 분, 초를 등록
    var d = Math.floor(distance / (1000 * 60 * 60 * 24));
    var h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var s = Math.floor((distance % (1000 * 60)) / 1000);

    //id가 d-day인 HTML코드에 내용 삽입
    document.getElementById("d-day").innerHTML = "디데이까지 " + d +"일 " + h + "시간 " + m + "분 " + s + "초 남았습니다.";
});

'개발 > JavaScript30' 카테고리의 다른 글

19. Webcam Fun  (0) 2017.04.17
18. Adding Up Times with Reduce  (0) 2017.04.16
16. Mouse Move Shadow  (0) 2017.04.13
15. LocalStorage  (0) 2017.04.13
14. JavaScript Reference VS Copying  (0) 2017.04.12

'개발 > JavaScript30' 카테고리의 다른 글

18. Adding Up Times with Reduce  (0) 2017.04.16
17. Sort Without Articles  (0) 2017.04.13
15. LocalStorage  (0) 2017.04.13
14. JavaScript Reference VS Copying  (0) 2017.04.12
13. Slide in on scroll  (0) 2017.04.12

'개발 > JavaScript30' 카테고리의 다른 글

17. Sort Without Articles  (0) 2017.04.13
16. Mouse Move Shadow  (0) 2017.04.13
14. JavaScript Reference VS Copying  (0) 2017.04.12
13. Slide in on scroll  (0) 2017.04.12
12. Key Sequence Detection  (0) 2017.04.11

'개발 > CSS' 카테고리의 다른 글

CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09
CSS flex-box 재미있게 익히기  (0) 2017.04.24

'개발 > JavaScript30' 카테고리의 다른 글

16. Mouse Move Shadow  (0) 2017.04.13
15. LocalStorage  (0) 2017.04.13
13. Slide in on scroll  (0) 2017.04.12
12. Key Sequence Detection  (0) 2017.04.11
11. Custom Video Player  (0) 2017.04.10

'개발 > JavaScript30' 카테고리의 다른 글

15. LocalStorage  (0) 2017.04.13
14. JavaScript Reference VS Copying  (0) 2017.04.12
12. Key Sequence Detection  (0) 2017.04.11
11. Custom Video Player  (0) 2017.04.10
10. Hold Shift and Check Checkboxes  (0) 2017.04.10

'개발 > JavaScript30' 카테고리의 다른 글

14. JavaScript Reference VS Copying  (0) 2017.04.12
13. Slide in on scroll  (0) 2017.04.12
11. Custom Video Player  (0) 2017.04.10
10. Hold Shift and Check Checkboxes  (0) 2017.04.10
9. Dev Tools Domination  (0) 2017.04.09

+ Recent posts