进度条定时器只刷新页面刷新

Question

我们正在创建一个筛选工具，这是问题的一部分。在时间问题下面有一个进度栏，但它只填充栏或显示重新加载页面时的进度。

这是代码

public function screening(Request $request){ 

     $user_test = User_test::find(Session::get('user_test_id')); 
     $test = $user_test->test; 

     var_dump($user_test->questionsLeft()); 

     $time = floor((strtotime(date('Y-m-d H:i:s')) - strtotime($user_test->started_at))/60); 

     if($test->time <= $time){ 
      $user_test->unanswered = array_sum($user_test->questionsLeft()); 
      $user_test->finished_at = date('Y-m-d H:i:s'); 
      $user_test->score = $user_test->calculateScore(); 
      $user_test->save(); 
      return Redirect::route('user.dashboard')->with('error', ['test timed out']); 
     } 

     //Get user test object 
     $test = $user_test->test; 

     $current = $test->test_subcategories()->sum('amount') - array_sum($user_test->questionsLeft()) + 1; 

     //Get next question 
     if(Session::get('question_id') == null){ 
      $question = $user_test->getNextQuestion(); 
      Session::flash('question_id', $question->id); 
     } else if(!$user_test->answers()->where('question_id', Session::get('question_id'))->exists()){ 
      $question = Question::find(Session::get('question_id')); 
     } else { 
      $question = $user_test->getNextQuestion(); 
      Session::flash('question_id', $question->id); 
     } 

     // Calculate time 
     if($user_test->started_at == null){ 
      return Redirect::route('user.dashboard'); 
     } else { 
      $time = round((strtotime(date('Y-m-d H:i:s')) - strtotime($user_test->started_at))/60); 
     } 

     $lang = Sentinel::check()->text_lang_code; 

     return view('screening.test', array(
      'test' => $test, 
      'question' => $question, 
      'lang' => $lang, 
      'time' => $time, 
      'current' => $current 
     )); 
    } 

这是进度

<progress value="{{$time}}" max="{{$test->time}}"></progress> 

Answer 1

灌装/更新进度条是前端作业。 您需要ajax请求来计算，然后基于使用jQuery的响应更新进度条。

从阿贾克斯

像 你得到响应

$.ajax({ 
    url: "{your path}", 
}) 
    .done(function(data) { 
     jQuery('progress').attr('value',time); 
     jQuery('progress').attr('max',test.time); 
    }); 

Answer 2

这就是我们如何设法得到它的权利

$(document).ready(function(){ 
    var progress = $('progress'); 
    progress.val(); 
    progress.prop('max'); 

    progress.data('time', progress.val()); 

    function countTimer() { 
     if(progress.data('time') < progress.prop('max') + 10){ 
      progress.val(progress.val()+1); 
      progress.data('time', progress.data('time')+1); 
     } else { 
      location.reload(); 
      console.log('timed out'); 
     } 
    } 
    var setinterval = setInterval(countTimer, 6 * 1000); 

});