Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.11.2016, 00:04
Новичок на форуме
Отправить личное сообщение для NellDenZ Посмотреть профиль Найти все сообщения от NellDenZ
 
Регистрация: 09.03.2016
Сообщений: 9

Как остановить Progress Bar по клику
Здраствуйте. Сделал Progress Bar, все работает вот только не могу сделать кнопку чтобы остановить его(Когда нажимаешь на кнопку "Stop", прогресс останавливается). Помогите пожалуйста)

Код:
Ссылка на plnkr.co - демо

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .progress_bar {
      position: relative;
      width: 200px;
      height: 5px;
      background: silver;
    }
    .progress {
      height: 5px;
      background: green;  
    }
    }
  </style>
</head>
<body>
  <script>
    function move() {
    var elem = document.getElementById("bar"); 
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            width = 1;
        } else {
            width++; 
            elem.style.width = width + '%'; 
        }
    }
  }
  </script>
  <div class="progress_bar">
    <div class="progress" id="bar" style="width: 0px;"></div>
  </div>
  <br>
  <input type="button" value="start" onClick="move()">
  <input type="button" value="stop" onClick="">
</body>

</html>
Ответить с цитированием
  #2 (permalink)  
Старый 16.11.2016, 00:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

NellDenZ,
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .progress_bar {
      position: relative;
      width: 200px;
      height: 5px;
      background: silver;
    }
    .progress {
      height: 5px;
      background: green;
    }
    .hide{
      display: none;
    }

  </style>
</head>
<body>
  <script> var id,width = 1;
    function move() {
    end();
    var elem = document.getElementById("bar");
    elem.parentNode.classList.remove("hide");
    id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            width = 1;
        } else {
            width++;
            elem.style.width = width + '%';
        }
    }
  }
  function end()
  {
    window.clearInterval(id);
    var elem = document.getElementById("bar");
    elem.parentNode.classList.add("hide");
  }
  </script>
  <div class="progress_bar">
    <div class="progress" id="bar" style="width: 0px;"></div>
  </div>
  <br>
  <input type="button" value="start" onClick="move()">
  <input type="button" value="stop" onClick="end()">
</body>

</html>

Последний раз редактировалось рони, 16.11.2016 в 00:51.
Ответить с цитированием
  #3 (permalink)  
Старый 16.11.2016, 00:40
Новичок на форуме
Отправить личное сообщение для NellDenZ Посмотреть профиль Найти все сообщения от NellDenZ
 
Регистрация: 09.03.2016
Сообщений: 9

Скажите пожалуйста еще как сделать чтобы при клике на кнопку старт progress bar появился (display: block; ) и после нажатие кнопки "Stop" спрятался (display: none
Ответить с цитированием
  #4 (permalink)  
Старый 16.11.2016, 00:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

NellDenZ,
смотрите код снова
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать выпадающие картинки по клику с перезаписью select thefair Общие вопросы Javascript 5 15.12.2015 22:54
Как остановить бабблинг ? Григорий Данилович Events/DOM/Window 8 30.10.2015 18:29
Как остановить воспроизведение видео с youtube? Арсений JustPuk Элементы интерфейса 0 11.08.2015 14:23
progress bar на чтение из БД TomTykver AJAX и COMET 8 19.05.2015 05:40
progress bar для JS Dagger Общие вопросы Javascript 18 14.05.2009 14:02