stackoverflow如何使用jquery计算答案接受时间限制为14分钟？

Question

有人可以帮助我使用一个计时器，就像 stackoverflow 的答案接受 14 分钟的时间限制一样。如何在 jquery 中创建计时器并使用它？

编辑：

我正在做一个在线考试系统，时间限制为60分钟，我想每十分钟显示一次剩余分钟的警报..如何在jquery中做到这一点？或者我应该将其移至服务器端。

Answer 1

他们不会在 JavaScript 中执行此操作（对于许多事情，您不应该在 JavaScript 中执行此操作，因为它非常很容易规避）。 显示时间是一回事，实际使用它进行有效性检查是另一回事。

因此，这是服务器端的事情，当您单击它尝试接受答案时，服务器会给出一个响应，表示这还不是有效的操作，您所看到的只是显示错误消息。

如果你想显示倒计时，有一些插件已经可以很好地做到这一点，或者走自定义路线并不难，jQuery 倒计时 可能是最著名的。

Answer 2

我认为 stackoverflow 正在做的是，当提交答案时，会生成一个唯一的 id，并将未来的时间戳（直到必须接受哪个答案）保存在数据库中。服务器中可能每五分钟运行一个调度程序，该调度程序查询针对特定时间段提交的答案。 14 然后，对于那些需要立即注意的答案，将标志列设置为Y。当用户重新加载页面时，会检查该标志并通知警报。

上述解决方案可能适用于 3 天前提出问题但至今尚未接受问题答案的用户。

否则，您可以使用服务器推送ajax并检查当前时间以及提交答案时服务器数据库中存储的时间。

Answer 3

建立这个之后，我可以提出以下建议。

@nick 建议使用 jquery 倒计时 - 好主意

function startquiz () {
var austDay = new Date();
var qtime = $('#quiz_time1').val(); // value in stored hidden input field
austDay = +qtime+'s';
$('#quizCountdown').countdown({until: austDay,
         layout: 'Quiz Time Remaining: {mn} {ml}, {sn} {sl} ',
         onExpiry: liftOff2
    });

function liftoff2() {
     $('#quizpage, #pages').toggle(); /get rid of the quiz bring back instructs
     $('#quizCountdown').countdown('destroy');
}
} 

 function loadquiz(ptype) {   
   var sid = 'sid='+ $('#sid').val(); //these values are in hidden input fields  
   var grade = '&grade='+ $('#grade').val();   
   var adata = sid + grade +  ptype;  
   $("#pageside").slideUp("fast");  
   $.ajax({
     method: "get",url: "quiz.php",data: adata,
     beforeSend: function(){
          $("#loadingpage").show();}, //show loading just when link is clicked
     complete: function(){ 
          $("#loadingpage").hide();}, //stop showing loading when the process complete
     success: function(html){ //so, if data is retrieved, store it in html
         $("#loadingpage").hide(); 
         $("#quizpage").show("fast"); //animation
         $("#quizpage").html(html); //show the html inside #quizpage div
         setupform(); // set the quiz submission ajax
         startquiz(); // starts the quiz
         $('#pages').toggle(); // get the directions out of the way
    }  }); }

这将从您通过隐藏字段设置的数据加载测验页面上的计时器。当计时器完成时，测验页面将切换到开始测验之前可见的页面。

现在，大部分的魔力在于您设置表单 (setupform(); ) 来管理提交的方式。我们提供两种模式的限时测验。一次所有问题，一次一个问题。根据测验的方法，设置管理答案的提交方式。您需要实现一些事情...

1) 当测验开始时，我们存储测验 ID、学生 ID 和开始时间

2) 当我们构建报告（评分）时，我们会丢弃任何比测验开始时间长的数据quizid 和倒计时偏移量，因此即使有人破解了计时器，服务器时间戳也是最终仲裁者。定时器和自动关闭只是为了方便用户。服务器是实际的计时员。

Answer 4

我会得到一个显示剩余时间的部分结果或控件。然后我可以使用以下 jQuery 语句重新加载页面的该部分。

<div id="timeRemaining">60 minutes</div>
<script>
  var $timeRemaining = $("#timeRemaining"), url = "my/path/to/get/time";
  var updateTimeRemaining = function () { 
    $timeRemaining.load(url);
  };
  setInterval(updateTimeRemaining, 60000);      
</script>

进行编辑以反映尼克的评论。
*再次编辑。*