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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
목록에 게시글마다 남은시간 표시

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문안에서 돌리시면 되실텐데요..다만 선택자 수정이 조금필요하긴하지만요

답변을 작성하시기 전에 로그인 해주세요.
전체 124,163 | RSS
QA 내용 검색

회원로그인

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