목록에 게시글마다 남은시간 표시

목록에 게시글마다 남은시간 표시

QA

목록에 게시글마다 남은시간 표시

본문

여기 게시판 검색해서 남은시간 카운트되는 소스를 찾았습니다.

 

종료일자부분에 var countDownDate = new Date("April 12, 2019 06:00:00").getTime();

 

April 12, 2019 06:00:00 이거를 여분필드를 적용해서 하고싶은데 어떻게 해야 여분필드가 적용이 될까요? ㅠㅠ

 

그리고 목록에서 반복되는 부분이라

 

    document.getElementById("counter1").innerHTML = d;
    document.getElementById("counter2").innerHTML = h;
    document.getElementById("counter3").innerHTML = m;
    document.getElementById("counter4").innerHTML = s;

 

             <SPAN id=counter1></SPAN>일
             <SPAN id=counter2></SPAN>시간
             <SPAN id=counter3></SPAN>분
             <SPAN id=counter4></SPAN>초</b>

 

이런 counter1 숫자?를 어떻게 넣어야 반복해도 게시물마다 다 나올련지요?

 

이소스로는 목록에서 사용이 불가능하다면 불가능하다라는 답변이라도 주세요..ㅠㅠ

 

 

아래는 소스 원본입니다.

 

<script>
//디데이 종료 일자 설정
var countDownDate = new Date("April 12, 2019 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);
    document.getElementById("counter1").innerHTML = d;
    document.getElementById("counter2").innerHTML = h;
    document.getElementById("counter3").innerHTML = m;
    document.getElementById("counter4").innerHTML = s;
});
</script>

 

 

              <DIV id=count>
             <font color="#000000" size="3"><b> 남은시간</b></font>

             <font size="4"><b>

             <SPAN id=counter1></SPAN>일
             <SPAN id=counter2></SPAN>시간
             <SPAN id=counter3></SPAN>분
             <SPAN id=counter4></SPAN>초</b>
             </font>

             </div>

             <SCRIPT>getTime()</SCRIPT>

 

  

이 질문에 댓글 쓰기 :

답변 2

작성 일자로부터 여분필드에 있는 목표시간까지의 남은 시간 카운트를 하고싶으시다는건가요?

제가 질문을 제대로 이해했다면.. 실시간 카운트가 아니라도 상관없으시다면 php로

여분필드1번을 사용했다 하셨을때 

list.skin.php는 $list[$i]["wr_1"]에서 목표 시간이 저장되있을것 이고...

for문이 돌아가는 곳에서 

$writeDate = new datetime($list[$i]["wr_datetime"]); // 작성 일자

$writeY = $writeData->format("Y");  // 작성 연도

$writeM = $writeData->format("m");  // 작성 월

$writeD = $writeData->format("d");  // 작성 일

$targetDate = new datetime($list[$i]["wr_1"]); // 여분필드 목표시간

$targetY = $targetDate ->format("Y");  // 목표 연도

$targetM = $targetDate ->format("m");  // 목표 월

$targetD = $targetDate ->format("d");  // 목표 일

하시고 if문으로 비교해서 출력 하시면 될거같고,,

 

 

setinverval같은 자바스크립트 함수로 실시간표현을 하고 싶으시다면

list.skin.php에서는 for문안에 작성해주시고

<?php 

    $targetDate = new datetime($list[$i]["wr_1"]); // 여분필드 목표시간

    $formatDate = $targetDate -> format("F d, Y H:i:s"); // 여분필드 목표시간 포맷

?>

<script>
//디데이 종료 일자 설정
var countDownDate = new Date("<?php echo $formatDate ?>").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);

    $(".counter1").innerHtml = d;

    $(".counter1").innerHtml = h;

    $(".counter1").innerHtml = m;

    $(".counter1").innerHtml = s;
});
</script>

             <DIV id=count>
             <font color="#000000" size="3"><b> 남은시간</b></font>

             <font size="4"><b>

             <SPAN class=counter1></SPAN>일
             <SPAN class=counter2></SPAN>시간
             <SPAN class=counter3></SPAN>분
             <SPAN class=counter4></SPAN>초</b>
             </font>

             </div>

             <SCRIPT>getTime()</SCRIPT>

저도 테스트는 돌려봐야겠지만.. 

답변감사드립니다(__
두번째 알려주신것으로 적용해봤는데 안나오길래 원소스에 <?php echo $formatDate ?> 이부분넣어주니 잘나와요.
근데 목록에서 첫번째글에서만 정상적으로 나오고 그밑의 글에서는 숫자없이 "남은시간 일 시간 분 초" 이렇게 글자만 나오네요..
이렇게 되어서 목록에서 여러글에 동시에 나오게하려면 어떻게해야하는지 물었던것인데요.
이 소스로는 첫번째글에서밖에 안될까요? ㅜ ㅜ

제가 디자인만 해가지고 잘몰라서 ㅠㅠ
for문안에 돌리라는 얘기가
리스트에
        <?php
        for ($i=0; $i<count($list); $i++) {

        ?>
이거 안에만 넣으면 된다는 뜻맞으신지...
저거 안에 시간 나올 위치에 스크립트랑 다 그냥 막 넣었는데요. ㅜ ㅜ
잘못했나용?

이전에 다른분이 이거랑 같은 질문 올리신글에 어떤분이 답변을


-------------------------
document.getElementById("counter1").innerHTML = dRound;

document.getElementById("counter2").innerHTML = hRound;

document.getElementById("counter3").innerHTML = mRound;

document.getElementById("counter4").innerHTML = sRound;

 

값이 표시되는 부분이 위와같습니다.

id값 counter1부터 4까지의 값을 늘리세여

아니면 함수를 늘려주시고 위 아이디값을 바꿔주세여
-------------------------

이렇게 해주셨는데요.
이걸 어떻게 늘리는것인지 모르겠어요.

제가 그냥 막연하게 바보같이 숫자에다가 <?=$i?> 이렇게 그냥 막 넣었는데 "일"에 초가 나오고 나머지 시간 분 초엔 아무것도 안나오고요....

ㅠㅠ 자꾸 물어서 죄송합니다.

지금 자바스크립트에서 innerhtml로 출력되는부분이 공통되는 부분들이라 그래요 즉, 같은 for문안에서 자바스크립트도 같이 돌아가야만 해요 근데 datetime을 갖고오는 부분은 다 for문안에서 돌아가서 각자 갖고 온다한들 자바스크립트 innerhtml은 밖에서 돌고 있으니까 같은 위치에 같은 시간만 출력하는거에요

아뇨아뇨! 안되는게 아니라 그 스크립트를 php for문밖에서 돌리시려면 스크립트를 포문으로 다시 짜셔야하는거고 for문안에서 돌리시면 되실텐데요..다만 선택자 수정이 조금필요하긴하지만요

답변을 작성하시기 전에 로그인 해주세요.
전체 2

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT