Форум

UnicornLord · #1 (**permalink**) 03.06.2019, 11:14

Господа, есть код js, при нажатии кнопки начинает работать speed bar после чего на кнопке появляется новая надпись, Файл готов. Как на это новое значение воткнуть ссылку?

$(document).ready(function(){
 var timer=0;
 var percentageWidth = $('#progressBar').outerWidth()/100;
  function timerRun(){
    $('#progressBar .progress-bar').css("width", timer + "%").attr("aria-valuenow", timer);
    
    $('#progressBar .progress-number').css("-webkit-transform", "translateX(" + percentageWidth*timer + "px)").attr("aria-valuenow", timer);
    
    if(timer >= 100){  
      $('#progressBar .progress-bar').css("width","100%");
      $('#loadBtn').html("Файл готов");
      return;
    }
    timer++;
    setTimeout(function(){timerRun()},200);
  }
  
  $('#loadBtn').click(function(e){
    e.preventDefault();
    $(this).html("Архивируется...");
    timerRun();
  });
});

как поставить ссылку на

$('#loadBtn').html("Файл готов");

рони · #2 (**permalink**) 03.06.2019, 11:58

UnicornLord,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

UnicornLord · #3 (**permalink**) 03.06.2019, 12:03

Исправил

рони · #4 (**permalink**) 03.06.2019, 12:06

UnicornLord,

$('#loadBtn').replaceWith("<a href='/test'>Файл готов</a>");

UnicornLord · #5 (**permalink**) 03.06.2019, 12:16

вставил код

$(document).ready(function(){
 var timer=0;
 var percentageWidth = $('#progressBar').outerWidth()/100;
  function timerRun(){
    $('#progressBar .progress-bar').css("width", timer + "%").attr("aria-valuenow", timer);
    
    $('#progressBar .progress-number').css("-webkit-transform", "translateX(" + percentageWidth*timer + "px)").attr("aria-valuenow", timer);
    
    if(timer >= 100){  
      $('#progressBar .progress-bar').css("width","100%");
      $('#loadBtn').replaceWith("<a href='https;//google.com/test'>Файл готов</a>");
      return;
    }
    timer++;
    setTimeout(function(){timerRun()},200);
  }
  
  $('#loadBtn').click(function(e){
    e.preventDefault();
    $(this).html("Архивируется...");
    timerRun();
  });
});

И не сработало... Или я что то не так делаю?
Вот сама кнопка в html

<div class="show-container">
  <div class="progress" id="progressBar">
    <div class="progress-number" aria-valuenow="0" style="left: 0;"></div>
    <div class="rounded">
      <div class="progress-bar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
      </div>
    </div>
  </div>
  <div class="button-container">
    <a href="#" id="loadBtn" class="button">Запаковать Архив</a>
  </div>
</div>

рони · #6 (**permalink**) 03.06.2019, 12:30

UnicornLord,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .progress-bar{
      height: 10px;
      width: 0px;
      background-color: hsl(0, 100%, 40%);
  }
  .progress-number:after{
      content: attr(aria-valuenow)"%";
      margin-left: -38px;
  }
  #progressBar{
      overflow: hidden;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function(){
var timer=0;
var percentageWidth = $('#progressBar').outerWidth()/100;
function timerRun(){
$('#progressBar .progress-bar').css("width", timer + "%").attr("aria-valuenow", timer);

$('#progressBar .progress-number').css("-webkit-transform", "translateX(" + percentageWidth*timer + "px)").attr("aria-valuenow", timer);

if(timer >= 100){
$('#progressBar .progress-bar').css("width","100%");
$('#loadBtn').replaceWith("<a href='/test'>Файл готов</a>");
return;
}
timer++;
setTimeout(timerRun ,200);
}

$('#loadBtn').one('click', function(e){
e.preventDefault();
$(this).html("Архивируется...");
timerRun();
});
 });


  </script>
</head>

<body>
<div id="progressBar"><div class="progress-bar"></div><div class="progress-number"></div></div>
<button id="loadBtn">go</button>

</body>
</html>

рони · #7 (**permalink**) 03.06.2019, 12:40

Сообщение от UnicornLord

Или я что то не так делаю?

всё должно работать, в ссылке только неправильно указан путь.

рони · #8 (**permalink**) 03.06.2019, 12:41

UnicornLord,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .progress-bar{
      height: 10px;
      width: 0px;
      background-color: hsl(0, 100%, 40%);
  }
  .progress-number:after{
      content: attr(aria-valuenow)"%";
      margin-left: -38px;
  }
  #progressBar{
      overflow: hidden;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function(){
var timer=0;
var percentageWidth = $('#progressBar').outerWidth()/100;
function timerRun(){
$('#progressBar .progress-bar').css("width", timer + "%").attr("aria-valuenow", timer);

$('#progressBar .progress-number').css("-webkit-transform", "translateX(" + percentageWidth*timer + "px)").attr("aria-valuenow", timer);

if(timer >= 100){
$('#progressBar .progress-bar').css("width","100%");
$('#loadBtn').replaceWith("<a href='https://google.com/test'>Файл готов</a>");
return;
}
timer++;
setTimeout(timerRun ,200);
}

$('#loadBtn').one('click', function(e){
e.preventDefault();
$(this).text("Архивируется...");
timerRun();
});
 });


  </script>
</head>

<body>
<div class="show-container">
  <div class="progress" id="progressBar">
    <div class="progress-number" aria-valuenow="0" style="left: 0;"></div>
    <div class="rounded">
      <div class="progress-bar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
      </div>
    </div>
  </div>
  <div class="button-container">
    <a href="#" id="loadBtn" class="button">Запаковать Архив</a>
  </div>
</div>


</body>
</html>

UnicornLord · #9 (**permalink**) 03.06.2019, 13:11

Да все заработало) спасибо большое)))

Форум

Справочник

Discord чат

Курсы javascript