javascript - 仅在页面刷新时重新加载的进度条计时器

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 的响应

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