How to make it so that when you click on any of them, the square starts to blink smoothly changing the opacity?

enter image description here

Here is the code:

var cols = prompt('Введите количество строк', ''); var rows = prompt('Введите количество столбцов', ''); cols = parseInt(cols); rows = parseInt(rows); document.write('<table border="1" cellpadding="2" cellspacing="0" width="1000px" height="600px">'); var color; function getColor() { var min = 1, max = 2; var colorNum = Math.round(Math.random() * (max) + min), color; if (colorNum == 1) { color = 'blue'; } if (colorNum == 2) { color = 'green'; } if (colorNum == 3) { color = 'red'; } console.log(colorNum); return color; } for (i = 1; i <= cols; i++) { for (j = 1; j <= rows; j++) { document.write('<td style="background-color:' + getColor() + '"></td>'); } document.write("</tr>"); } document.write('</table>'); 
 table { margin: 0 auto }

    2 answers 2

    An example of using JS && CSS

     var cols = prompt('Введите количество строк', ''); var rows = prompt('Введите количество столбцов', ''); cols = parseInt(cols); rows = parseInt(rows); var table = document.createElement("table"); table.border = 1; table.cellPadding = 2 table.cellSpacing = 0 table.width = "1000px" table.style.width = "1000px" table.height = "600px" table.style.height = "600px" document.body.appendChild(table); var color; function blink(){ var tds = document.getElementsByTagName('td'); for( var i in tds ){ tds[i].className = ""; } this.className = "blink"; } function getColor() { var min = 1, max = 2; var colorNum = Math.round(Math.random() * (max) + min), color; if (colorNum == 1) { color = 'blue'; } if (colorNum == 2) { color = 'green'; } if (colorNum == 3) { color = 'red'; } console.log(colorNum); return color; } for (i = 1; i <= cols; i++) { var tr = document.createElement("tr"); table.appendChild(tr); for (j = 1; j <= rows; j++) { var tdElement = document.createElement("td"); tdElement.addEventListener("click", blink); tdElement.style.backgroundColor = getColor() tr.appendChild( tdElement ); } } 
     table { margin: 0 auto } .blink { animation: pulse 0.4s alternate infinite ease-in-out; } @keyframes pulse { to { transform: scale(1); opacity: 0.5; } }

    • and where is blink called? - Grundy
    • @Grundy tdElement.addEventListener ("click", blink); - xAqweRx
    • yeah, didn’t notice this line - Grundy
    • @ANTON specify what exactly is not clear. - xAqweRx
    • @xAqweRx tds [i] .className = "" this is a string if possible explain - ANTON

    here's an example of how this can be done with css animation: pulse 0.4s alternate infinite ease-in-out; . You can simply add this property and it is the element that you specify will blink. And then you need to add later

     @keyframes pulse { to { transform: scale(1); opacity: 0.5; } }
    • need to javascript - ANTON
    • @Tigo, why do you think you need javascript? if on it you still will change the same css properties - what's the difference? - Grundy
    • @Grundy task is to create on javascript-e and not on css - ANTON
    • @ANTON, lab? :-) - Grundy
    • @Grundy is not a task for myself, I was fooling my head for a long time)) - ANTON