카운트다운 스크립트
작업중에 팁 공유합니다~ ^^
지정한 날짜/시간/분/초 까지 남은시간을 실시간 카운트 해줍니다.
남은시간이 없는 경우 종료문구 포함되어 있습니다.
경매 등에 사용하면 좋을것 같습니다~
Script
[code]
<script>
CountDownTimer('12/20/2019 00:00', 'countdown');
//시간 지정시
//CountDownTimer('01/01/2020', 'countdown');
//시간 필요없는 경우 대체
function CountDownTimer(dt, id)
{
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = '경매종료'; // 종료시 보일 문구
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById(id).innerHTML = days + '일 ';
document.getElementById(id).innerHTML += hours + '시간 ';
document.getElementById(id).innerHTML += minutes + '분 ';
document.getElementById(id).innerHTML += seconds + '초';
}
timer = setInterval(showRemaining, 1000);
}
</script>
[/code]
Html
[code]
<!-- 카운트 출력 (실시간) -->
<span id="countdown"></span>
[/code]
예시화면 첨부합니다.
댓글 35개
추천 누르고 갑니다.
에서 미리 날자/시간부분을 변수로 지정 해주면
알아서 카운트하도록 사용하는 용도라..ㅎㅎ
[code]
//CountDownTimer('12/20/2019 00:00', 'countdown');
CountDownTimer('<?php echo $list[i]['wr_1'] // 날짜?> <?php echo $list[i]['wr_2'] //시간?>', 'countdown');
[/code]
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4412 | ||
| 2574 | 10개월 전 | 561 | ||
| 2573 | 10개월 전 | 937 | ||
| 2572 |
두리삼촌v
|
10개월 전 | 608 | |
| 2571 | 10개월 전 | 555 | ||
| 2570 | 10개월 전 | 598 | ||
| 2569 |
두리삼촌v
|
10개월 전 | 637 | |
| 2568 |
두리삼촌v
|
10개월 전 | 666 | |
| 2567 |
두리삼촌v
|
10개월 전 | 460 | |
| 2566 |
두리삼촌v
|
10개월 전 | 442 | |
| 2565 | 10개월 전 | 738 | ||
| 2564 | 10개월 전 | 667 | ||
| 2563 | 10개월 전 | 472 | ||
| 2562 | 10개월 전 | 1029 | ||
| 2561 |
 수평선1203 |
10개월 전 | 674 | |
| 2560 | 10개월 전 | 918 | ||
| 2559 | 10개월 전 | 655 | ||
| 2558 |
 간장게장같은남자 |
11개월 전 | 503 | |
| 2557 | 11개월 전 | 656 | ||
| 2556 | 11개월 전 | 953 | ||
| 2555 | 11개월 전 | 1336 | ||
| 2554 | 11개월 전 | 752 | ||
| 2553 |
수평선1203 |
11개월 전 | 746 | |
| 2552 | 11개월 전 | 674 | ||
| 2551 | 11개월 전 | 864 | ||
| 2550 | 11개월 전 | 766 | ||
| 2549 |
 dkstmdc |
11개월 전 | 716 | |
| 2548 | 11개월 전 | 1031 | ||
| 2547 | 11개월 전 | 670 | ||
| 2546 | 11개월 전 | 1203 | ||
| 2545 | 11개월 전 | 660 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기