Как остановить 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>
|
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>
|
Скажите пожалуйста еще как сделать чтобы при клике на кнопку старт progress bar появился (display: block; ) и после нажатие кнопки "Stop" спрятался (display: none;)
|
NellDenZ,
смотрите код снова |
| Часовой пояс GMT +3, время: 04:34. |