[英]ASP.net Javascript Countdown clock timer for each row of a gridview
Using Asp.net 4.0/C# SQL 2008 使用Asp.net 4.0 / C#SQL 2008
I have a page with a gridview on it. 我有一个带有gridview的页面。 I need a countdown clock in the format HH:MM:SS that will count backwards until it reach the expiration date.
我需要HH:MM:SS格式的倒数时钟,该时钟将倒计时直到达到到期日期。 My code is properly showing the clock for the first row of the gridview but any additional rows are not executing the javascript clock.
我的代码正确显示了gridview第一行的时钟,但其他行未执行javascript时钟。
For testing purposes, I have a basic stored procedure that includes a generic primary key, Expiration date and the Current date. 出于测试目的,我有一个基本的存储过程,其中包括通用主键,到期日期和当前日期。 I call a javascript function that will then get the difference between the 2 dates and format them.
我调用了一个javascript函数,然后将获得2个日期之间的差并将其格式化。 Appreciate any assistance to help me get the countdown clock timer to appear on each row of the gridview.
感谢任何帮助我使倒数时钟计时器出现在gridview的每一行上的帮助。
Current SQL Code: 当前的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
Current ASPX Gridview Code: 当前的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>
Current ASPX.CS Code: 当前的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();
}
The idea is to have a generic method and on each row, you call that method... for example: 这个想法是要有一个通用方法,并在每一行上调用该方法...例如:
your table column should only be: 您的表格栏只能是:
<ItemTemplate>
<span id="timer_<%# Container.DataItemIndex %>"
class="timer"
data-start="<%# Eval("EndDate")%>"></span>
</ItemTemplate>
</asp:TemplateField>
then, in your <script>
block at the end of the page, you should have the timer countdown and fire it for each .timer
element, like: 然后,在页面末尾的
<script>
块中,应该进行计时器倒计时,并为每个.timer
元素触发它,例如:
using jQuery to simplify 使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.