First, the background should be empty, after clicking on the button to start the animation, a square appears and begins to rotate, after pressing the delete button, this square is deleted and a blank background returns.

<!DOCTYPE html> <html> <head> <style type="text/css"> .square{ width: 80px; height: 80px; margin: 30px auto; background-color: #A52A2A; animation-name: spin; animation-duration: 2s; } @keyframes spin{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } </style> </head> <body> <div class="square"> </div> <script type="text/javascript"> btn1=document.createElement('BUTTON'); // созданиС ΠΊΠ½ΠΎΠΏΠΊΠΈ btn1.id='cmd1'; // id ΠΊΠ½ΠΎΠΏΠΊΠΈ btn1.onclick = function(){ // функция ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ Π½Π΅ΠΉ } btn1.textContent ='Π½Π°Ρ‡Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ'; // имя ΠΊΠ½ΠΎΠΏΠΊΠΈ document.body.appendChild(btn1); // Π½ΡƒΠΆΠ½ΠΎ для добавлСния ΠΊΠ½ΠΎΠΏΠΊΠΈ btn2=document.createElement('BUTTON'); // вторая ΠΊΠ½ΠΎΠΏΠΊΠ° btn2.id='cmd2'; btn2.onclick = function(){ } btn2.textContent ='ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ'; // имя ΠΊΠ½ΠΎΠΏΠΊΠΈ document.body.appendChild(btn2); </script> </body> </html>

    1 answer 1

     btn1 = document.createElement('BUTTON'); // созданиС ΠΊΠ½ΠΎΠΏΠΊΠΈ btn1.id = 'cmd1'; // id ΠΊΠ½ΠΎΠΏΠΊΠΈ btn1.onclick = function () { // функция ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ Π½Π΅ΠΉ document.getElementsByClassName('square')[0].style.display = 'block'; } btn1.textContent = 'Π½Π°Ρ‡Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ'; // имя ΠΊΠ½ΠΎΠΏΠΊΠΈ document.body.appendChild(btn1); // Π½ΡƒΠΆΠ½ΠΎ для добавлСния ΠΊΠ½ΠΎΠΏΠΊΠΈ btn2 = document.createElement('BUTTON'); // вторая ΠΊΠ½ΠΎΠΏΠΊΠ° btn2.id = 'cmd2'; btn2.onclick = function () { document.getElementsByClassName('square')[0].style.display = 'none'; } btn2.textContent = 'ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ'; // имя ΠΊΠ½ΠΎΠΏΠΊΠΈ document.body.appendChild(btn2); 
     .square { width: 80px; height: 80px; margin: 30px auto; background-color: #A52A2A; animation-name: spin; animation-duration: 2s; display: none; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 
      <div class="square"> </div>