JavaScript- How to change multiple <td> background colors randomly?
Question
I have this page [Screenshot of my page ][1]
[1]: http://i.stack.imgur.com/hZ5fr.png and I want to change the background colors (randomly and let the colors change automatically) of every td of this table when i click Demarrer button. Or if it's impossible how can i let one color slide between all this td ( just like a game) Will Appreciate any help.
function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; } // **************** // give random color depending on group // **************** var color1; var color2; function animation1(){ color1 = getRandomColor(); color2 = getRandomColor(); } // **************** // give all a random color // **************** function animation2(){ $('td').each(giveBackground2); setTimeout(animation2, 250); } function giveBackground2(){ $(this).find('div').css('background-color', getRandomColor()); }
table, td { padding: 0; border-collapse: collapse; } body { width: 624px; margin-left: auto; margin-right: auto; line-height: 1; } .groupe1 { background-color:#B0090C; float: left; height: 35px; width: 35px; } .groupe2 { background-color:#F7F27F; float: left; height: 35px; width: 35px; } body button { border-radius: 10px; } .round-button { display:block; width:60px; height:60px; line-height:50px; border: 2px solid #f5f5f5; border-radius: 50%; color:#f5f5f5; text-align:center; text-decoration:none; background:#A40205; box-shadow: 0 0 3px gray; font-size:20px; font-weight:bold; margin-left: auto; margin-right:auto; } .round-button:hover { background:#9E2C2E; }
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <html > <head> <title></title> <link rel="stylesheet" href="projet.css" type="text/css" /> <script src="projet.js"></script> <script src="jQuery_v2.2.4.js"></script> </head> <body> <div id="container"> <table > <tbody> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> </tbody> </table> </div> <button class="round-button" onclick="animation2()">Start</button> </body> </html>
1 answers
solution1
3 ACCPTED 2016-06-04 14:21:30
function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; } // **************** // initial random coloring // **************** $('document').ready(function(){ //animation2(); }); // **************** // give random color depending on group // **************** var color1; var color2; function animation1(){ color1 = getRandomColor(); color2 = getRandomColor(); $('td').each(giveBackground); } function giveBackground(){ $(this).find('.groupe1').css('background-color', color1); $(this).find('.groupe2').css('background-color', color2); } // **************** // give all a random color // **************** function animation2(){ $('td').each(giveBackground2); setTimeout(animation2, 2000); } function giveBackground2(){ $(this).find('div').css('background-color', getRandomColor()); }
#container table { border: none; margin: auto; } body { width: 624px; margin-left: auto; margin-right: auto; } .groupe1 { background-color: #000000; float: left; height: 30px; width: 30px; } .groupe2 { background-color:#FFDE01; float: left; height: 30px; width: 30px; }
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <html > <head> <title></title> <link rel="stylesheet" href="stylesprojet.css" type="text/css" /> <script src="scriptsprojet.js"></script> </head> <body> <div id="container"> <table width="30" border="0"> <tbody> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> <tr> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> </tr> <tr> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> <td><div class="groupe2"></div></td> <td><div class="groupe1"></div></td> </tr> </tbody> </table> </div> <button onclick="animation1()">Demarrer</button> <button onclick="animation2()">Demarrer2</button> </body> </html>
To keep changing, add this line to the function:
setTimeout(animation2, 2000);
2000 = miliseconds.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make ::selection background and text change randomly based on specific colors
JavaScript: How to change the background color of each td?
How to change background color randomly in HTML with JavaScript?
JavaScript- How to change “message” div to yellow
Javascript- Dynamicly Change Background Image Based On The Last String Of The URL
How to change a <td> background color on click using JavaScript?
How to change html td background colour through Javascript?
how to change background color of multiple td elements using jquery
How can I change the background color randomly with the Javascript?
How to change the background image of TD?
Related Tags