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);
  });

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);

});

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

2 个答案: