데이터베이스에 시작 시간을 저장하지 않으면 세션을 사용하여 동일한 작업을 더 많거나 적게 수행 할 수 있습니다. 아래의 코드는 카운트 다운을 호출하지만 ~이있는 실제 코드에 맞게 수정해야하지만 결과를 보려면 "있는 그대로"실행 해보십시오. 세션이 유지되고, 따라서 페이지 사이를 유지 카운트 다운이 내가 함께 여러 페이지를 에뮬레이트하는 작은 단일 페이지 데모를 넣어 당신을 설득하기위한 노력의 일환으로
<?php
session_start();
/* quiz.php */
if(empty($_SESSION['quiz']))$_SESSION['quiz']=date('Y-m-d H:i:s');
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Quiz countdown</title>
<script>
<?php
$start=$_SESSION['quiz'];
$end=date('Y-m-d H:i:s', strtotime($_SESSION['quiz'] . ' +20 minutes'));
echo "
var date_quiz_start='$start';
var date_quiz_end='$end';
var time_quiz_end=new Date('$end').getTime();";
?>
document.addEventListener('DOMContentLoaded', function(){
(function(time){
var now=new Date().getTime();
var difference = time_quiz_end - now;
var days = Math.floor(difference/(1000 * 60 * 60 * 24));
var hours = Math.floor((difference % (1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((difference % (1000 * 60 * 60))/(1000 * 60));
var seconds = Math.floor((difference % (1000 * 60))/1000);
t=setTimeout(arguments.callee, time);
if(difference <= 0){
clearTimeout(t);
alert('GAME OVER');
/* redirect user, display message, stand on one leg or whatever you need to do - quiz has finished */
return false;
}
document.getElementById("starttime").innerHTML=date_quiz_start;
document.getElementById("endtime").innerHTML=date_quiz_end;
document.getElementById("showtime").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
})(1000);
},false);
</script>
</head>
<body>
<div id='starttime'></div>
<br />
<div id='endtime'></div>
<br />
<div id='showtime'></div>
</body>
</html>
. 단순화를 위해 3 개의 파일이 있습니다.
메인 페이지 ~ 나는 so-quiz.php라고 불렀다하지만 이름은 중요하지 않다
<?php
session_start();
include 'quiz.inc'; // see below
?>
<html>
<head>
<meta charset='utf-8' />
<title>Quiz experiments</title>
<script>
<?php
$start=$_SESSION['quiz'];
$end=date('Y-m-d H:i:s', strtotime($_SESSION['quiz'] . ' +'.$quizlength.' minutes'));
echo "
var date_quiz_start='$start';
var date_quiz_end='$end';
var time_quiz_end=new Date('$end').getTime();";
?>
</script>
<script src='quiz-timer.js'></script><!-- see below -->
<style>
#display,#actions,#question {display:block;font-family:calibri,verdana,arial;font-size:0.9rem;box-sizing:border-box;}
#display{margin:0 auto 1rem auto;}
#actions{margin:1rem auto;}
#question{color:red}
</style>
</head>
<body>
<div id='display'>
<div id='starttime'></div>
<div id='endtime'></div>
<div id='showtime'></div>
</div>
<div id='question'>
<?php
echo "Display question based upon page $page";
?>
</div>
<div id='actions'>
<input id='prev' type='button' data-page='<?php echo $page;?>' value='Previous' />
<input id='next' type='button' data-page='<?php echo $page;?>' value='Next' />
</div>
</body>
</html>
두 번째는 포함 된 파일입니다 - quiz.inc
<?php
/* session header for quiz experiments */
/*
to reset use ?del=1
*/
if(!empty($_GET['del']) && !empty($_SESSION['quiz'])) {
unset($_SESSION['quiz']);
header('Location: so-quiz.php');
}
if(empty($_SESSION['quiz'])){
$_SESSION['quiz']=date('Y-m-d H:i:s');
$_SESSION['quizlength']=20;
}
$quizlength=$_SESSION['quizlength'];
$page=filter_input(INPUT_GET, 'page', FILTER_SANITIZE_NUMBER_INT);
if(empty($page)) $page=1;
?>
그리고 마지막으로 자바 스크립트 quiz-timer.js
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('next').onclick=function(e){
location.search='page='+(parseInt(e.target.dataset.page) + 1)
};
document.getElementById('prev').onclick=function(e){
if(parseInt(e.target.dataset.page) > 1) location.search='page='+(parseInt(e.target.dataset.page) - 1)
};
(function(time){
var now=new Date().getTime();
var difference = time_quiz_end - now;
var days = Math.floor(difference/(1000 * 60 * 60 * 24));
var hours = Math.floor((difference % (1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((difference % (1000 * 60 * 60))/(1000 * 60));
var seconds = Math.floor((difference % (1000 * 60))/1000);
t=setTimeout(arguments.callee, time);
if(difference <= 0){
clearTimeout(t);
alert('GAME OVER');
/* redirect user, display message, stand on one leg or whatever you need to do - quiz has finished */
return false;
}
document.getElementById("starttime").innerHTML='Quiz began at: '+date_quiz_start;
document.getElementById("endtime").innerHTML='Quiz will end at: '+date_quiz_end;
document.getElementById("showtime").innerHTML = 'Time remaining: '+days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
})(1000);
},false);
라고
previous, Next 버튼은 페이지를 다시로드하고 실제로 다른 페이지로드를 에뮬레이션하는 페이지 카운터를 증가시킵니다. 포함 된 quiz.inc이 세션을 유지 관리하므로 시간/카운트 다운 표시가 유지됩니다.
사용자가 퀴즈를 시작하면 데이터베이스에 datetime을 기록합니까? – RamRaider
아니, 데이터베이스에 기록하지 않고 있습니다. 카운트 다운 타이머가 필요합니다. 시간이 끝나면 퀴즈가 중지됩니다. –
질문은'php에서 카운트 다운 타이머를 구현하는 법'이라고 말하지만 모든 코드는 자바 스크립트입니다. 시작 시간을 기록하지 않으면 사용자가 페이지를 다시로드하는 것을 멈추고 타이머가 다시 시작됩니다. – RamRaider