jquery效果(练习)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jquery.aspx.cs" Inherits="jquery" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<style type="text/css">
.balack
{
background-color: Black;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id ="dd" width="500px" height="500px" align="center" valign="middle">
<tr>
<td id="td1" class="">
1
</td>
<td id="td2" class="balack">
2
</td>
<td id="td3" class="balack">
3
</td>
<td id="td4" class="balack">
4
</td>
</tr>
<tr>
<td id="td5" class="balack">
5
</td>
<td id="td6" class="balack">
6
</td>
<td id="td7" class="balack">
7
</td>
<td id="td8" class="balack">
8
</td>
</tr>
<tr>
<td id="td9" class="balack">
9
</td>
<td id="td10" class="balack">
10
</td>
<td id="td11" class="balack">
11
</td>
<td id="td12" class="balack">
12
</td>
</tr>
<tr>
<td id="td13" class="balack">
13
</td>
<td id="td14" class="balack">
14
</td>
<td id="td15" class="balack">
15
</td>
<td id="td16" class="balack">
16
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<script type="text/javascript">
var ccc=0;
window.setInterval(function() {
cc();
}, 888);
function Clear()
{
for(var i=0;i<$("#dd td").size();i++)
{
$("#dd td").eq(i).removeClass().addClass("balack");
}
}
function cc() {
if(ccc < $("#dd td").size()) {
Clear();
$("#dd td").eq(ccc).removeClass();
ccc++;
if (ccc == $("#dd td").size()) {
ccc = 0;
}
}
}
</script>