Question

使用Asp.net 4.0 / C＃SQL 2008

我有一个带有gridview的页面。我需要一个HH：MM：SS格式的倒计时时钟，它将向后计数，直到它到达截止日期。我的代码正确显示了gridview第一行的时钟，但是任何其他行都没有执行javascript时钟。

出于测试目的，我有一个基本的存储过程，包括通用主键，到期日期和当前日期。我调用一个javascript函数，然后获取两个日期之间的差异并格式化它们。 感谢任何帮助，让我让倒计时时钟计时器出现在gridview的每一行。

当前SQL代码：

create proc dbo.tmpdate2 as
begin
select 1 as ElementID, DATEADD(HH,1,GETDATE()) AS ExpDate, getdate() as NowDate
union all
select 2 as ElementID, DATEADD(HH,2,GETDATE()) AS ExpDate, getdate() as NowDate
END

当前的ASPX Gridview代码：

     <asp:GridView ID="GridView1" runat="server" BackColor="White" 
    BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" 
    ForeColor="Black" GridLines="Vertical">
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:TemplateField HeaderText="Todays Date">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"><%# Eval("NowDate")%></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField HeaderText="Expiration Date">
            <ItemTemplate>
                <div>
                <label id="ElementID"><label>
                <script language="javascript" type="text/javascript">
                    function Countdown(ElementID, ExpDateTimeString, NowDateTimeString) {
                        var NowDateTime = new Date(NowDateTimeString);
                        var ExpDateTime = new Date(ExpDateTimeString);

                        // convert the current date and the target date into miliseconds                       
                        var NowDateTimeMS = (NowDateTime).getTime();
                        var ExpDateTimeMS = (ExpDateTime).getTime();

                        // find their difference, and convert that into seconds                 
                        var TimeLeftSecs = Math.round((ExpDateTimeMS - NowDateTimeMS) / 1000);

                        if (TimeLeftSecs < 0) {
                            TimeLeftSecs = 0;
                        }

                        var Hours = Math.floor(TimeLeftSecs / (60 * 60));
                        TimeLeftSecs %= (60 * 60);
                        var Minutes = Math.floor(TimeLeftSecs / 60);
                        if (Minutes < 10) {
                            Minutes = "0" + Minutes;
                        }
                        TimeLeftSecs %= 60;
                        var Seconds = TimeLeftSecs;
                        if (Seconds < 10) {
                            Seconds = "0" + Seconds;
                        }

                        document.getElementById('ElementID').innerHTML = Hours + ":" + Minutes + ":" + Seconds;

                        // increment the NowDateTime 1 second
                        NowDateTimeMS += 1000;
                        NowDateTime.setTime(NowDateTimeMS);
                        // recursive call, keeps the clock ticking
                        var FunctionCall = "Countdown('" + ElementID + "','" + ExpDateTime + "','" + NowDateTime + "');";
                        setTimeout(FunctionCall, 1000);
                    }
                </script>
                <script language="javascript" type="text/javascript">

                        var NowDateTime = new Date('<%# Eval("NowDate") %>');
                        var ExpDateTime = new Date('<%# Eval("ExpDate") %>');
                        var ElementID = "00:00:00"; 

                        // recursive call, keeps the clock ticking
                        var FunctionCall = "Countdown('" + ElementID + "','" + ExpDateTime + "','" + NowDateTime + "');";
                        setTimeout(FunctionCall, 1000);
                </script>
                </div>
            </ItemTemplate>
        </asp:TemplateField>


    </Columns>
    <FooterStyle BackColor="#CCCC99" />
    <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
    <RowStyle BackColor="#F7F7DE" />
    <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#FBFBF2" />
    <SortedAscendingHeaderStyle BackColor="#848384" />
    <SortedDescendingCellStyle BackColor="#EAEAD3" />
    <SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>

当前的ASPX.CS代码：

protected void Page_Load(object sender, EventArgs e)
    {
        SqlConnection thisConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SomeConnectionString2"].ConnectionString);

        SqlCommand command = new SqlCommand("tmpdate2", thisConnection);
        command.CommandType = CommandType.StoredProcedure;

        SqlDataAdapter adapter = new SqlDataAdapter(command);

        DataTable table = new DataTable();

        adapter.Fill(table);

        GridView1.DataSource = table;
        GridView1.DataBind();
    }

Answer 1

我们的想法是拥有一个通用方法，并在每一行上调用该方法......例如：

您的表格列应该只有：

    <ItemTemplate>
        <span id="timer_<%# Container.DataItemIndex %>" 
              class="timer" 
              data-start="<%# Eval("EndDate")%>"></span>
    </ItemTemplate>
</asp:TemplateField>

然后，在页面末尾的<script>块中，您应该让计时器倒计时并为每个.timer元素触发它，例如：

使用jQuery简化

<script>
$(function() {
    $(".timer").each(function() {
        var startTime = $(this).data("start");
        Countdown($(this).attr("id"), startTime, new date());
    });
});

function Countdown(ElementID, ExpDateTimeString, NowDateTimeString) { 
    // your countdown...
}
</script>

ASP.net Javascript倒计时时钟计时器为gridview的每一行

1 个答案: