Question

我是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>

任何想法为什么它不起作用。我在这里看到了类似的话题，但是找不到答案。

Answer 1

我已经开始在Codepen，here中运行您的代码，并且它正在运行。请使用CTRL + Shift + J检查控制台是否有任何错误，可能是浏览器扩展问题。

进度条引导交互无法正常工作

1 个答案: