목록에 게시글마다 남은시간 표시
본문
여기 게시판 검색해서 남은시간 카운트되는 소스를 찾았습니다.
종료일자부분에 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>
저도 테스트는 돌려봐야겠지만..
목록에서 반복된다는 말이 뭔말인지 이해가 안되네요
자신이 뭘하고 싶은지를 목적과 용도를 말하는게 좋습니다.