JavaScript-如何随机更改多种背景颜色？

时间：2016-06-04 14:03:02

标签： javascript html css

我有这个页面[我页面的截图] [1]

[1]：http://i.stack.imgur.com/hZ5fr.png当我点击Demarrer按钮时，我想更改此表的每个td的背景颜色（随机地让颜色自动更改）。 或者，如果不可能，我怎么能让一个颜色在所有这个td之间滑动（就像游戏一样） 会感激任何帮助。

＆＃13;
＆＃13; 
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());
}
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：3)

＆＃13;
＆＃13; 
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());
}
＆＃13; 
#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;
 }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

要继续更改，请将此行添加到函数中：

setTimeout(animation2, 2000);

2000 =毫秒。

相关问题
最新问题