主页 / 问题 / 684418
Accepted
etterwin
Asked:2020-06-27 22:27:20 +0000 UTC2020-06-27 22:27:20 +0000 UTC

加载进度条后显示链接

  • 772

下载结束后如何显示链接？

var bar = $('.progress-bar');
var p = $('.progress-bar-text');

var width = bar.attr('style');
console.log(width);
width = width.replace("width:", "");
width = width.substr(0, width.length - 1);


var interval;
var start = 0;
var end = parseInt(width);
var current = start;

var countUp = function() {
  current++;
  p.html(current + "%");

  if (current === end) {
    clearInterval(interval);
  }
};

interval = setInterval(countUp, (1000 / (end + 1)));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question quest-loader quest-hiden" id="progress-bar">
  <div class="progres__bar">
    <span class="progress-bar" style="width:100%"></span>
    <p class="progress-bar-text"></p>
  </div>
  <a href="#" class="question__btn" id="btn-12">Show result</a>
</div>

javascript

2 个回答

  1. 如果我理解正确的话，那么就是这样。

    var bar = $('.progress-bar');
var p = $('.progress-bar-text');

var width = bar.attr('style');
console.log(width);
width = width.replace("width:", "");
width = width.substr(0, width.length - 1);


var interval;
var start = 0;
var end = parseInt(width);
var current = start;

var countUp = function() {
  current++;
  p.html(current + "%");

  if (current === end) {
    clearInterval(interval);
    $(".question__btn").show(); // показываем вашу ссылку
  }
};

interval = setInterval(countUp, (1000 / (end + 1)));
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question quest-loader quest-hiden" id="progress-bar">
  <div class="progres__bar">
    <span class="progress-bar" style="width:100%"></span>
    <p class="progress-bar-text"></p>
  </div>
  <a href="#" style="display:none" class="question__btn" id="btn-12">Show result</a> <!-- А тут как раз таки прячем-->
</div>

    • 1
  2. Best Answer

    像这样

    var bar = $('.progress-bar');
var p = $('.progress-bar-text');

var width = bar.attr('style');
width = width.replace("width:", "");
width = width.substr(0, width.length-1);


var interval;
var start = 0;
var end = parseInt(width);
var current = start;

var countUp = function() {
  current++;
  p.html(current + "%");

  if (current === end) {
    clearInterval(interval);
    $('.question__btn').show();
  }
};

interval = setInterval(countUp, (1000 / (end + 1)));
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question quest-loader quest-hiden" id="progress-bar">
   <div class="progres__bar">
    <span class="progress-bar" style="width:100%"></span>
    <p class="progress-bar-text"></p>
   </div>
   <a href="#" class="question__btn" style="display:none" id="btn-12">Show result</a>
 </div>

    • 1

相关问题