Прогресс бар загрузчик взаимодействия не работает - PullRequest
Новая
       8

Прогресс бар загрузчик взаимодействия не работает

0 голосов
/ 13 мая 2018

Я действительно новичок в html и пытаюсь запустить индикатор выполнения.Идея состоит в том, чтобы загрузить до 100% с интервалом между процентами.Чтобы проверить это, я просто сделал так, чтобы он взаимодействовал с моей кнопкой «Назад», поэтому, когда вы нажимаете «Назад», он должен загрузиться, но, к сожалению, он не работает. 

$('#pay').click(function() {

  var timerId, percent;

  // reset progress bar
  percent = 0;
  $('#pay').attr('disabled', true);
  $('#load').css('width', '0px');
  $('#load').addClass('progress-bar-striped active');


  timerId = setInterval(function() {

    // increment progress bar
    percent += 5;
    $('#load').css('width', percent + '%');
    $('#load').html(percent + '%');



    if (percent >= 100) {
      clearInterval(timerId);
      $('#pay').attr('disabled', false);
      $('#load').removeClass('progress-bar-striped active');
      $('#load').html('payment complete');



    }

  }, 200);


})

иhtml: 

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="style.css" rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="pBar.js"></script>
</head>



    <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="load" style="width:0%">
      0%
    </div>
  </div>



<button type="button" id="pay" class="btn btn-primary" autocomplete="off"  >Back</button>

Любые идеи, почему это не работает.Я видел похожую тему здесь, но не нашел ответа.

1 Ответ

0 голосов
/ 13 мая 2018

Я пошел вперед и запустил ваш код в Codepen, здесь , и он работает. Пожалуйста, используйте CTRL + Shift + J, чтобы проверить консоль на наличие каких-либо ошибок, возможно, проблема заключается в расширении браузера.

...