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>

 

posted @ 2009-06-11 21:23  悟〈--觉  阅读(155)  评论(0编辑  收藏  举报