D-Day 타이머
var ddaytimer = setInterval (dayGap, 1000)
function dayGap () {
var dday = new Date("November 24, 2017 00:00:00").getTime();// 디데이
var nowday = new Date();// 현재시각
nowday = nowday.getTime();// 밀리세컨드 단위변환
var distance = dday - nowday;// 남은 시간에서 현재시작을 뺀다.
var d = Math.floor(distance / (1000 * 60 * 60 * 24));// 일
var h = Math.floor((distance / (1000*60*60)) % 24);// 시간
var m = Math.floor((distance / (1000*60)) % 60);// 분
var s = Math.floor((distance / 1000) % 60);// 초
if (distance <= 0) {// 날짜가 바뀌는 기준으로 D-day로 변경
document.getElementById("dday-timer").innerHTML = "D-day";
} else {
document.getElementById("time-day").innerHTML = d;
document.getElementById("time-hour").innerHTML = h;
document.getElementById("time-minute").innerHTML = m;
document.getElementById("time-second").innerHTML = s;
}
}
HTML으로 뼈대를 만든 후, 스타일시트를 활용해서 간단하게 숫자를 디자인하고, 그 위에 자바스크립트로 기능을 구현할 것, 메인 랜딩페이지 또는 서비스 오픈 디데이 페이지를 만들 수 있다.
'Web Development > JavaScript' 카테고리의 다른 글
3초마다 모달창으로 "Hello" 구현하기 (0) | 2021.07.17 |
---|---|
[JavaScript] 버튼 클릭 제어 (0) | 2021.07.17 |
Simple Slider(JQuery) 심플한 슬라이더 (0) | 2021.07.17 |
제이쿼리를 해야하는 이유 (0) | 2021.07.17 |
탑버튼(topbtn) DOM 위치값 계산 (0) | 2021.07.17 |
다크 모드 라이트 모드 토글스위치 기능(Javascript/JQuery) (0) | 2021.07.17 |
[JavaScript] 타이핑 애니메이션 효과 - JQuery (0) | 2021.07.17 |
jQuery / Method / .append() (문자열 추가) (2) | 2019.09.07 |