게시물마다 시간 카운트다운
본문
1. 게시물마다 카운트다운을 하려고 합니다.
어찌어찌 소스를 구해서 php에서 남은 시간을 구해오는데는 성공했어요
<?php
$d_date = strtotime($list[$i]['wr_2']); // 종료시간
$dd_date = strtotime(date('Ymd H:i:s'));//현재시간
$total_time = $d_date - $dd_date; // 작성시간으로부터 얼마나 남았는지
$years = floor($total_time/31536000);
$days = floor($total_time/86400);
$date = ($days -(365*$years));
$time = $total_time - ($days*86400);
$hours = floor($time/3600);
$time = $time - ($hours*3600);
$min = floor($time/60);
$sec = $time - ($min*60);
if($years==0&&$date==0&&$hours==0&&$min==0)
echo ".$sec."초 </font>";
else if ($years==0&&$date==0&&$hours==0)
echo ".$min."분 ".$sec."초</font>";
else if($years==0&&$date==0)
echo ".$hours."시간".$min."분 ";
else if($years==0)
echo ".$date."일 ".$hours."시간";
else
echo "";
?>
이렇게 해서 php로는 남은 기간이나 일정을 구했는데 여기서 자바스크립트로 실시간으로 시간이 변하도록 변경하고싶어요.
경매사이트 보면 분이랑 초단위로 실시간으로 변경되는것처럼요.
이거저거 찾아서 해봐도 안되더라구요..ㅠㅠ도와주실분 계신가요.
2. 스크랩에서 특정 조건은 맨 뒷페이지로 넘기고 싶어요.
지금은 종료시간에 맞춰서 정렬을 했는데. 여기서 wr_2값이 현재시간이 지났으면 맨 뒷페이지로 이동하게 할수 있을까요?
$sql_order = " order by wr_2 asc ";
https://sir.kr/g5_plugin/1090 이걸 어떻게 수정하면 될거같은데 잘 모르겠네요 ㅠㅠ
답변 6
다음과 같은 방법도 있으니 참고해보세요
1번 질문
<script>
window.onload = function() {
// 종료 시간 설정 (UNIX 타임스탬프 형식으로)
var end_time = <?php echo strtotime($list[$i]['wr_2']); ?>;
// 카운트다운 업데이트 함수
function updateCountdown() {
var current_time = Math.floor(Date.now() / 1000); // 현재 UNIX 타임스탬프
var remaining_time = end_time - current_time; // 종료 시간까지 남은 시간 (초)
var days = Math.floor(remaining_time / (60 * 60 * 24));
var hours = Math.floor((remaining_time % (60 * 60 * 24)) / (60 * 60));
var minutes = Math.floor((remaining_time % (60 * 60)) / 60);
var seconds = remaining_time % 60;
// HTML 업데이트
document.getElementById('countdown').innerHTML = days + "일 " + hours + "시간 " + minutes + "분 " + seconds + "초";
}
// 매 초마다 카운트다운 업데이트
setInterval(updateCountdown, 1000);
// 페이지 로드 시에도 한 번 업데이트
updateCountdown();
};
</script>
<div id="countdown"></div>
2번 질문
<?php
// 현재 시간 (UNIX 타임스탬프 형식)
$current_time = strtotime(date('Ymd H:i:s'));
// 특정 조건 판별 (예: 현재 시간이 종료 시간을 지났는지)
if ($current_time > strtotime($list[$i]['wr_2'])) {
// 지난 경우, 맨 뒷페이지로 이동하는 URL로 redirect
header("Location: 맨뒷페이지URL");
exit; // 페이지 이동 후에는 반드시 종료 명령을 추가
} else {
// 지나지 않은 경우, 정상적인 페이지 로드
// 이 부분에 기존의 페이지 로직 추가
}
?>
https://wittazzurri.com/editor/html_editor.php 에서 확인해 보셈
자세한 사용법 - https://sir.kr/g5_tip/18467
<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 = "2024-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>
리스트 페이지라면 for 문 안에서 돌리면서 span 의 아이디를 게시물별로 리네임하거나 또는 클래스 처리하면 될 것입니다.
그리고 남은 시간 계산에는 자바스크립트에서 셋인터벌이 필요하므로 php 에서 단순정보만 받아서 자바스크립트 위주로 코드를 짜야지 php 위주로 코드를 짜면 굉장히 비효율적입니다.^^
저는 여기까지요.^^
https://www.w3schools.com/howto/howto_js_countdown.asp
<!-- Display the countdown timer in an element -->
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2030 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
@비타주리 님이 말씀하신것 처럼 for 안에서 반복 처리를 하셔야 하는데 그렇게 하지 않아서 적용이 되지 않은것 같네요
다음을 참고하셔서 원하시는 형식으로 구현해 보세요
<?php
include_once('./_common.php');
if (!$is_member)
alert_close('회원만 조회하실 수 있습니다.');
$sql_common = " from {$g5['scrap_table']} where mb_id = '{$member['mb_id']}' ";
$sql_order = " order by wr_id asc ";
$sql = " select count(*) as cnt $sql_common ";
$row = sql_fetch($sql);
$total_count = $row['cnt'];
$rows = $config['cf_page_rows'];
$total_page = ceil($total_count / $rows); // 전체 페이지 계산
if ($page < 1) $page = 1; // 페이지가 없으면 첫 페이지 (1 페이지)
$from_record = ($page - 1) * $rows; // 시작 열을 구함
$list = array();
$sql = " select *
$sql_common
$sql_order
limit $from_record, $rows ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
$list[$i] = $row;
// 순차적인 번호 (순번)
$num = $total_count - ($page - 1) * $rows - $i;
// 게시판 제목
$sql2 = " select bo_subject from {$g5['board_table']} where bo_table = '{$row['bo_table']}' ";
$row2 = sql_fetch($sql2);
if (!$row2['bo_subject']) $row2['bo_subject'] = '[게시판 없음]';
// 게시물 제목
$tmp_write_table = $g5['write_prefix'] . $row['bo_table'];
$sql3 = " select wr_subject, wr_2 from $tmp_write_table where wr_id = '{$row['wr_id']}' ";
$row3 = sql_fetch($sql3, FALSE);
$subject = ($row3['wr_subject']) ? get_text(cut_str($row3['wr_subject'], 100)) : '글이 없습니다.';
$list[$i]['num'] = $num;
$list[$i]['opener_href'] = './board.php?bo_table='.$row['bo_table'];
$list[$i]['opener_href_wr_id'] = './board.php?bo_table='.$row['bo_table'].'&wr_id='.$row['wr_id'];
$list[$i]['bo_subject'] = $row2['bo_subject'];
$list[$i]['subject'] = $subject;
$list[$i]['wr_2'] = $row3['wr_2'];
$list[$i]['del_href'] = './scrap_delete.php?ms_id='.$row['ms_id'].'&page='.$page;
}
?>
<script>
window.onload = function() {
<?php for ($i = 0; $i < count($list); $i++) : ?>
// 종료 시간 설정 (UNIX 타임스탬프 형식으로)
var end_time_<?php echo $i; ?> = <?php echo strtotime($list[$i]['wr_2']); ?>;
// 카운트다운 업데이트 함수
function updateCountdown_<?php echo $i; ?>() {
var current_time = Math.floor(Date.now() / 1000); // 현재 UNIX 타임스탬프
var remaining_time = end_time_<?php echo $i; ?> - current_time; // 종료 시간까지 남은 시간 (초)
var days = Math.floor(remaining_time / (60 * 60 * 24));
var hours = Math.floor((remaining_time % (60 * 60 * 24)) / (60 * 60));
var minutes = Math.floor((remaining_time % (60 * 60)) / 60);
var seconds = remaining_time % 60;
// HTML 업데이트
document.getElementById('countdown_<?php echo $i; ?>').innerHTML = days + "일 " + hours + "시간 " + minutes + "분 " + seconds + "초";
}
// 매 초마다 카운트다운 업데이트
setInterval(updateCountdown_<?php echo $i; ?>, 1000);
// 페이지 로드 시에도 한 번 업데이트
updateCountdown_<?php echo $i; ?>();
<?php endfor; ?>
};
</script>
<?php for ($i = 0; $i < count($list); $i++) : ?>
<div id="countdown_<?php echo $i; ?>"></div>
<?php endfor; ?>
다음과 같은 방법으로 해 볼 수 있을 것 같습니다.
참고하셔서 원하시는 형식으로 구현해 보세요
스크랩스킨파일
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$thum_width = 203; // 썸네일 가로크기
$thum_height = 271; // 썸네일 세로크기
$img_cols = 4; //썸네일 가로 개수
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$skin_url.'/style.css" media="screen">', 0);
?>
<script>
window.onload = function() {
<?php for ($i = 0; $i < count($list); $i++) : ?>
// 종료 시간 설정 (UNIX 타임스탬프 형식으로)
var end_time_<?php echo $i; ?> = <?php echo strtotime($list[$i]['wr_2']); ?>;
// 카운트다운 업데이트 함수
function updateCountdown_<?php echo $i; ?>() {
var current_time = Math.floor(Date.now() / 1000); // 현재 UNIX 타임스탬프
var remaining_time = end_time_<?php echo $i; ?> - current_time; // 종료 시간까지 남은 시간 (초)
var days = Math.floor(remaining_time / (60 * 60 * 24));
var hours = Math.floor((remaining_time % (60 * 60 * 24)) / (60 * 60));
var minutes = Math.floor((remaining_time % (60 * 60)) / 60);
var seconds = remaining_time % 60;
// HTML 업데이트
document.getElementById('countdown_<?php echo $i; ?>').innerHTML = days + "일 " + hours + "시간 " + minutes + "분 " + seconds + "초 남음";
// 만약 종료 시간이 현재 시간보다 이전이면 해당 항목을 맨 뒷페이지로 이동
if (remaining_time <= 0) {
document.getElementById('item_<?php echo $i; ?>').style.display = 'none';
}
}
// 매 초마다 카운트다운 업데이트
setInterval(updateCountdown_<?php echo $i; ?>, 1000);
// 페이지 로드 시에도 한 번 업데이트
updateCountdown_<?php echo $i; ?>();
<?php endfor; ?>
};
</script>
<div class="sub-title">
<h4>
<?php if($member['photo']) { ?>
<a href="<?php echo $list[$i]['opener_href_wr_id'] ?>" target="_blank" onclick="opener.document.location.href='<?php echo $list[$i]['opener_href_wr_id'] ?>'; return false;">
<?php
$thumb = get_list_thumbnail($list[$i]['bo_table'], $list[$i]['wr_id'], $thum_width, $thum_height, false, true);
if($thumb['src']) {
$img_content = '<span style="float:left;width:100%"><img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'"></span>';
} else {
$img_content = '';
}
echo $img_content;
?>
</a>
<?php } else { ?>
<i class="fa fa-user"></i>
<?php } ?>
<?php echo $g5['title'];?>
</h4>
</div>
<table class="div-table table">
<tbody>
<tr>
<?php
for ($i=0; $i<count($list); $i++) {
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height);
if($thumb['src']) {
$img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$thumb_width.'" height="'.$thumb_height.'">';
} else {
$img_content = '<img src="'.$latest_skin_url.'/img/noimage.gif" width="'.$thumb_width.'" height="'.$thumb_height.'">';
}
?>
<?php if ($i>0 && ($i % $img_cols == 0)) { ?>
</tr>
<tr>
<td colspan="<?php echo $img_cols ?>" height="5"></td>
</tr>
<tr>
<?php } ?>
<td id="item_<?php echo $i; ?>" align="center" valign="top" style="padding:5px">
<table width="<?php echo $thumb_width ?>" cellspacing="0" cellpadding="0">
<tr>
<td align="center"> <a href="<?php echo $list[$i]['opener_href_wr_id'] ?>">
<?php if(!G5_IS_MOBILE){ ?>
<?php
$thumb = get_list_thumbnail($list[$i]['bo_table'], $list[$i]['wr_id'], $thum_width, $thum_height, false, true);
if($thumb['src']) {
$img_content = '<span style="float:left;width:100"><img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'"></span>';
} else {
$img_content = '';
}
echo $img_content;
?>
<?php } ?>
<?php if(G5_IS_MOBILE){ ?>
<?php
$thumb = get_list_thumbnail($list[$i]['bo_table'], $list[$i]['wr_id'], 84, 111, false, true);
if($thumb['src']) {
$img_content = '<span style="float:left;width:100"><img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'"></span>';
} else {
$img_content = '';
}
echo $img_content;
?>
<?php } ?>
<?php } ?>
</td>
<?php } ?>
</tr>
</tbody>
</table>