我正在开发一个php的在线测验网站。我已经完成了大部分工作 - 一次从数据库中随机选择问题，我有以下php文件：
database.php，index.php，login.php，logout.php，quiz.php，result.php。
现在我想附上一个倒数计时器（使用分钟和秒数），这将在用户进行测验时连续显示。
当计时器到期（达到0）时， quiz.php 应显示为空白，应重定向到主页，用户可在其中查看结果。
我有以下倒数计时器代码，但我没有得到如何实现它，所以有人可以帮助如何实现。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language ="javascript" >
var tim;
var min = 20;
var sec = 60;
var f = new Date();
function f1() {
f2();
document.getElementById("starttime").innerHTML = "Your started your Exam at " + f.getHours() + ":" + f.getMinutes();
}
function f2() {
if (parseInt(sec) > 0) {
sec = parseInt(sec) - 1;
document.getElementById("showtime").innerHTML = "Your Left Time is :"+min+" Minutes ," + sec+" Seconds";
tim = setTimeout("f2()", 1000);
}
else {
if (parseInt(sec) == 0) {
min = parseInt(min) - 1;
if (parseInt(min) == 0) {
clearTimeout(tim);
location.href = "default5.aspx";
}
else {
sec = 60;
document.getElementById("showtime").innerHTML = "Your Left Time is :" + min + " Minutes ," + sec + " Seconds";
tim = setTimeout("f2()", 1000);
}
}
}
}
</script>
</head>
<body onload="f1()" >
<form id="form1" runat="server">
<div>
<table width="100%" align="center">
<tr>
<td colspan="2">
<h2>This is head part for showing timer and all other details</h2>
</td>
</tr>
<tr>
<td>
<div id="starttime"></div><br />
<div id="endtime"></div><br />
<div id="showtime"></div>
</td>
</tr>
<tr>
<td>
<br />
</td>
</tr>
</table>
<br />
</div>
</form>
</body>
</html>
答案 0 :(得分：1)
除非您想使用WebSocket或任何其他可以保持连接的东西，否则无需在PHP中创建计时器。 您所需要的只是（部分实现的）：
1 - Javascript计时器，
var maxTime = 50000; // time in milliseconds
setTimeout(postFormFunction, maxTime)
2 - Autopost
function postFormFunction() {
getElementById('form1').submit();
}
3 - 最后，但最重要的（对于真正的应用程序），是为了确保用户不会作弊，因此您需要在创建表单时存储时间，并检查发布表单的时间，因为expirienced用户会阻止你JS超时并且无限时间，除非你检查它。
我不会为此提供任何代码，因为它是您设计应用的方式，将它存储在数据库中，还是使用令牌，甚至将数据存储在硬盘上......所以我相信当真正的应用程序出现时，你会找到自己的方式;）
答案 1 :(得分：0)
如果您没有将启动时间存储在数据库中，您可以使用会话或多或少地完成相同的操作。下面的代码调用倒计时，但你需要修改以适应你拥有的实际代码〜但是尝试运行这个＆＃34;按原样＃34;看到结果。
<?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;
?>
最后是javascript，名为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会维持会话。
答案 2 :(得分：0)
在js中创建一个倒数计时器。测验时间将开始您的固定时间。您需要确定时间。您可以使用PHP和JS创建动态计时器。
//设置我们倒数的日期 // 1. JavaScript // var countDownDate = new Date（“ Sep 5，2018 15:37:25”）。getTime（）; // 2. PHP
var countDownDate = <?php
echo strtotime("$date $h:$m:$s" ) ?> * 1000;
var now = <?php echo time() ?> * 1000;
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
// 1. JavaScript
// var now = new Date().getTime();
// 2. PHP
now = now + 1000;
// Find the distance between now an 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);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h " +
minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
创建数据库并管理动态倒数时间。 Create countdown timer using JS, PHP, Mysql
答案 3 :(得分：0)
您可以使用PHP和JS创建倒数计时器。该会话可帮助您在另一页上获取数据。使用JS和PHP以及创建动态倒数计时器以及使用会话。创建一个countdown timer using JS and PHP。我尝试并创造了自己。
使用strtotime（）函数
var countDownDate = * 1000; var now = * 1000;您也可以使用会话。