Работа с кнопками JavaScript

164

19 июня 2019, 07:30

Есть анимация и 4 кнопки: Быстрее, Медленнее, Стоп, Старт. Как сделать, чтобы при нажатии Старт, кнопка Стоп была неактивна, но если нажать потом Медленнее или Быстрее, то становилась доступной?

"use strict"; 
var frames = [ 
  'http://via.placeholder.com/50x50/cc00ff/000000', 
  'http://via.placeholder.com/50x50/ffccff/000000', 
  'http://via.placeholder.com/50x50/ff66ff/000000', 
  'http://via.placeholder.com/50x50/ff6666/000000', 
  'http://via.placeholder.com/50x50/ffffff/000000', 
  'http://via.placeholder.com/50x50/d010ff/000000', 
  'http://via.placeholder.com/50x50/ad01ff/000000', 
  'http://via.placeholder.com/50x50/123456/000000', 
  'http://via.placeholder.com/50x50/6543ff/000000', 
  'http://via.placeholder.com/50x50/cc56ff/000000', 
  'http://via.placeholder.com/50x50/65ccf1/000000' 
] 
var currentFrame = 0 
var img = document.getElementById("animation"); 
var frameTime = 100 
var interval = null 
 
function animate() { 
  currentFrame += 1; 
  if (currentFrame > frames.length - 1) { 
    currentFrame = 0; 
  } 
  img.src = "images/" + frames[currentFrame]; 
} 
 
function stop() { 
  clearInterval(interval); 
  interval = null; 
} 
 
function start() { 
  stop(); 
  interval = setInterval(animate, frameTime); 
} 
 
function faster() { 
  frameTime -= 50; 
  if (frameTime <= 20) { 
    frameTime = 20; 
  } 
  if (interval != null) { 
    start(); 
  } 
} 
 
function slower() { 
  frameTime += 50; 
  if (frameTime >= 1500) { 
    frameTime = 1500; 
  } 
  if (interval != null) { 
    start(); 
  } 
}

<div style="text-align: center;"> 
  <img id="animation" src="http://via.placeholder.com/50x50/ff00ff/000000" style="margin: 120px 0 100px 0; padding-top: 10px; border: 4px solid #e0e0e0;"> 
</div> 
<div style="text-align: center;"> 
  <button onclick="faster()">Быстрее</button> 
  <button onclick="slower()">Медленнее</button> 
  <button onclick="stop()">Стоп</button> 
  <button onclick="start()">Старт</button> 
</div>

Answer 1

"use strict"; 
var frames = ['s1.gif', 's2.gif', 's3.gif', 's4.gif', 's5.gif', 's6.gif', 's7.gif', 's8.gif', 's9.gif', 's10.gif', 's11.gif']; 
var currentFrame = 0; 
var frameTime = 100; 
var interval = null; 
var img = document.getElementById("animation"); 
 
function animate() { 
  currentFrame += 1; 
  if (currentFrame > frames.length - 1) { currentFrame = 0; } 
  img.src = "images/" + frames[currentFrame]; 
} 
 
function stop() { 
  clearInterval(interval); 
  interval = null; 
} 
 
function start() { 
  stop(); 
  interval = setInterval(animate, frameTime); 
} 
 
function faster() { 
  frameTime -= 50; 
  if (frameTime <= 20) { frameTime = 20; } 
  if (interval != null) { start(); } 
  document.querySelector(".btn-stop").disabled = false; 
} 
 
function slower() { 
  frameTime += 50; 
  if (frameTime >= 1500) { frameTime = 1500; } 
  if (interval != null) { start(); } 
  document.querySelector(".btn-stop").disabled = false; 
}

<div style="text-align: center;"> 
  <img id="animation" src="images/s1.gif" style="margin: 120px 0 100px 0; padding-top: 10px; border: 4px solid #e0e0e0;"> 
</div> 
<div style="text-align: center;"> 
  <button onclick="faster()" class="btn-fast">Быстрее</button> 
  <button onclick="slower()" class="btn-slow">Медленнее</button> 
  <button onclick="stop()" class="btn-stop" disabled>Стоп</button> 
  <button onclick="start()" class="btn-start">Старт</button> 
</div>

Answer 2

const start = document.getElementById('start'); 
const stop = document.getElementById('stop'); 
const slow = document.getElementById('slow'); 
const fast = document.getElementById('fast'); 
 
 
start.addEventListener('click', startClickHandler); 
 
function startClickHandler() { 
  stop.setAttribute('disabled', 'disabled'); 
  // Действия по обработке события клика 
} 
 
slow.addEventListener('click', slowClickHandler); 
fast.addEventListener('click', fastClickHandler); 
 
function slowClickHandler() { 
  enableStop(); 
  // Действия по обработке события клика 
} 
 
function fastClickHandler() { 
  enableStop(); 
  // Действия по обработке события клика 
} 
 
function enableStop() { 
  stop.removeAttribute('disabled'); 
}

<button id="start">Start</button> 
<button id="stop">Stop</button> 
<button id="slow">Slow</button> 
<button id="fast">Fast</button>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Найти значения с тем же ключом в MySQL?

Есть таблица table с полями key и nameИщу строки по значению name

140

MySQL

Разпарсить из поля строку, сравнить её значения и записать результат сравнения в другое поле

Есть база данных футбольных матчей с результатамиНапример:

148

MySQL

MySQL. Как использовать условия в SQL запросе?

Подскажите пожалуйста как использовать условия в SQL запросе?

229

MySQL

Партицирование таблицы по дате

Есть таблица с 40+ млн записей, и для быстродействия возникла необходимость ее партицировать по датеПартицирование требует PRIMARY ключ на поле,...

179