Javascript Criar botão ON/OFF Javascript

Lucas R. · 25 de agosto de 2020

Olá.

Estou tentando criar um botão ON/OFF que vai desativar/ativar a animação dos circulos, alguém consegue me ajudar?

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animação de cor</title>
    <link rel="stylesheet" href="estilo.css">
    
</head>
<body>

  <div class="circulo"></div>
  <div class="circulo"></div>
  <div class="circulo"></div>
  <div class="circulo"></div>
  <div class="circulo"></div>
  <div class="circulo"></div>
  <div class="circulo"></div>
  <div class="circulo"></div>
  <div class="circulo"></div>
  <div class="circulo"></div>
  <div class="circulo"></div>
  <div class="circulo"></div>
  <div class="circulo"></div>
  <div class="circulo"></div>
  <div class="circulo"></div>
  <div class="circulo"></div>
 
  <br>

  <button> On</button>
  <button> Off </button>
  <script src="scrip.js"></script>
</body>

</html>

CSS

body {
    background-color: black;
}
.circulo {
    animation-duration: 6s;
    animation-name: animacao;
    animation-iteration-count: infinite;
    display: flex;
    margin: 1rem;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    background: rgba(0, 0, 0, 0.3);
    position: relative;
    transition: 1s all ease;
    float: left;
  }

  .classe_of {
      background-color: white;
  }

@keyframes animacao {
    
    15% {background-color: orange}
    30% {background-color: yellow}
    45% {background-color: green}
    60% {background-color: rgb(42, 150, 192)}
    80% {background-color: darkblue}
    100% {background-color: purple}
    

}

Will871 · 26 de agosto de 2020

@Lucas R.
Olá, amigo!
Seria, basicamente, isso aqui:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animação de cor</title>
    <style>
        body {
            background-color: black;
        }

        .circulo {
            display: flex;
            margin: 1rem;
            border-radius: 50%;
            height: 50px;
            width: 50px;
            background: yellow;
            position: relative;
            transition: 1s all ease;
            float: left;
        }

        div[circulos] {
            width: 100%;
            display: table;
        }

        div[circulos].ativar div.circulo {
            animation-duration: 6s;
            animation-name: animacao;
            animation-iteration-count: infinite;
        }

        .classe_of {
            background-color: white;
        }

        @keyframes animacao {
            15% { background-color: orange }
            30% { background-color: yellow }
            45% { background-color: green }
            60% { background-color: rgb(42, 150, 192) }
            80% { background-color: darkblue }
            100% { background-color: purple }
        }
    </style>
</head>

<body>
    <div circulos>
        <div class="circulo"></div>
        <div class="circulo"></div>
        <div class="circulo"></div>
        <div class="circulo"></div>
        <div class="circulo"></div>
        <div class="circulo"></div>
        <div class="circulo"></div>
        <div class="circulo"></div>
        <div class="circulo"></div>
        <div class="circulo"></div>
        <div class="circulo"></div>
        <div class="circulo"></div>
        <div class="circulo"></div>
        <div class="circulo"></div>
        <div class="circulo"></div>
        <div class="circulo"></div>
    </div>
    <div>
        <button type="button" onclick="ligar(event);">Ligar</button>
    </div>
</body>
<script type="text/javascript">
    function ligar(e) {
        let circulos = document.querySelector('div[circulos]');
        if ((" " + circulos.className + " ").replace(/[\n\t]/g, " ").indexOf(" ativar ") > -1) {
            circulos.classList.remove("ativar");
            e.target.innerHTML = 'Ligar';
        } else {
            circulos.classList.add('ativar');
            e.target.innerHTML = 'Desligar';
        }
    }
</script>
</html>