59 lines
No EOL
1.2 KiB
HTML
Executable file
59 lines
No EOL
1.2 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
div {
|
|
height: 18px;
|
|
margin: 1px;
|
|
background-color: green;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<input type="button" id="start" value="Старт">
|
|
<input type="button" id="stop" value="Стоп" disabled>
|
|
|
|
<script>
|
|
for (var i = 0; i <= 20; i += 2) {
|
|
document.write('<div>' + i + '</div>');
|
|
}
|
|
|
|
var startButton = document.getElementById('start');
|
|
var stopButton = document.getElementById('stop');
|
|
|
|
var timers = [];
|
|
|
|
stopButton.onclick = function() {
|
|
startButton.disabled = false;
|
|
stopButton.disabled = true;
|
|
|
|
for (var i = 0; i < timers.length; i++) clearInterval(timers[i]);
|
|
timers = [];
|
|
}
|
|
|
|
startButton.onclick = function() {
|
|
startButton.disabled = true;
|
|
stopButton.disabled = false;
|
|
|
|
var divs = document.getElementsByTagName('div');
|
|
for (var i = 0; i < divs.length; i++) {
|
|
animateDiv(divs, i);
|
|
}
|
|
}
|
|
|
|
function animateDiv(divs, i) {
|
|
var div = divs[i],
|
|
speed = div.innerHTML;
|
|
timers[i] = setInterval(function() {
|
|
div.style.width = (parseInt(div.style.width || 0) + 2) % 400 + 'px'
|
|
}, speed);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |