남은시간 (디데이) 카운트 : 자바스크립트

· 2022-05-11 (수) 12:49:47 · 5650 · 18

 

targetTime = "2022-09-01-13:30:00"; 

위의 변수만 동일한 패턴으로 년도-월-일-시간:분:초 로 넣어줍니다.

월,일,시간,분,초 가 한 자리 단위일 때는 앞에 0을 붙여 두 자리로 만듭니다.

 

[code]

<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel=stylesheet>
<style>
#countSpan { font-family:Lato; font-weight:bold; font-size:4rem; }
#countSpan span { font-size:2rem; }
</style>
<script>
targetTime = "2022-12-25-13:30:00";
document.write("<span id='countSpan'></span>");
targetCount = targetTime.split("-")[1] + "-" + targetTime.split("-")[2] + "-" + targetTime.split("-")[0] + "-" + targetTime.split("-")[3];
function countInterval() {
    countTime = new Date(targetCount) - new Date();
    countDay = Math.floor(countTime / (1000 * 60 * 60 * 24)) < 1 ? "" : Math.floor(countTime / (1000 * 60 * 60 * 24)) + "<span>일</span> ";
    countHour = ("0" + Math.floor(countTime % (1000 * 60 * 60 * 24) / (1000 * 60 * 60))).slice(-2) + ":";
    countMinute = ("0" + Math.floor(countTime % (1000 * 60 * 60) / (1000 * 60))).slice(-2) + ":";
    countSecond = ("0" + Math.floor(countTime % (1000 * 60) / 1000)).slice(-2);
    if (countTime < 1) {
        countSpan.innerHTML = "이벤트 종료";
        clearInterval(countMode);
    }
    else countSpan.innerHTML = countDay + countHour + countMinute + countSecond;   
}
countInterval();
countMode = setInterval(countInterval, 1000);
</script>

[/code]

 

게시판에서 여분필드로 표현할 때는 예를 들어 wr_1 일 때는 뷰페이지에서

targetTime = "<php echo $view['wr_1']; ?>";

로 표현해주면 되겠지요.

|

댓글 18개

감사합니다.
2022-05-11 (수) 17:10:55
@재아 감사합니다
2022-05-11 (수) 17:02:31
감사합니다.
2022-05-11 (수) 17:11:04
@크리스휘 감사합니다
감사합니다
2022-05-11 (수) 18:54:35
@수콩 감사합니다
감사합니다!!
2022-05-12 (목) 07:30:22
@준후준후 감사합니다
좋아요. 감사 합니다.
2022-05-12 (목) 13:06:48
@들레아빠 감사합니다
2022-06-08 (수) 19:26:28
@들레아빠 예 감사합니다.
2022-05-16 (월) 17:41:10
당장은 아니지만 유용하게 쓸수 있을거 같네요 ^^ 감사합니다
2022-05-16 (월) 22:38:50
@앨리스인체인 감사합니다
활용도가 좋네요 ^^

적용해보니 뷰페이지에선 카운팅이 되는데 리스트에는 왜 안될까요 ?

그리고,
targetTime = "<php echo $view['wr_1']; ?>"; 하면


NaN일 aN:aN:aN


이렇게 나옵니다 ^^;
2023-02-21 (화) 00:14:49
@sosososo $list 를 사용해야 합니다.
감사해요
2023-02-21 (화) 00:14:58
@SiheonLee 감사합니다
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
22-05-31 조회 5,645
22-05-26 조회 6,235
22-05-25 조회 5,579
22-05-23 조회 5,548
22-05-23 조회 5,116
22-05-19 조회 4,863
22-05-15 조회 6,505
22-05-12 조회 5,003
22-05-11 조회 5,651
22-05-10 조회 6,334
22-05-09 조회 6,089
22-05-06 조회 5,806
22-05-04 조회 5,666
22-04-25 조회 4,765
22-04-22 조회 8,570
22-04-22 조회 6,200
22-04-21 조회 5,877
22-04-21 조회 4,613
22-04-18 조회 6,124
22-04-16 조회 5,098
22-04-14 조회 6,577
22-04-13 조회 4,536
22-04-12 조회 4,067
22-04-12 조회 5,041
22-04-12 조회 4,177
22-04-12 조회 4,257
22-04-12 조회 9,891
22-04-12 조회 4,394
22-04-09 조회 6,546
22-04-09 조회 4,429