gridview asp.net 中的 javascript 计时器-6ren

gridview asp.net 中的 javascript 计时器

转载作者：行者123 更新时间：2023-11-28 04:17:25

在我的产品表中，我有开始日期和结束日期。我想在我的 asp.net gridview 中显示一个倒计时器，这样当它到期时，它会显示“项目结束”

它显示:但是我如何删除硬编码日期以从 SQL 数据库中选择日期。另外，使用硬编码日期，它仅在我的 gridview 表的第一行中显示一次。这是aspx页面:

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" CssClass="Grid" AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" DataKeyNames="ProjectID" DataSourceID="SqlDataSource1" ForeColor="Black" PageSize="50" GridLines="Vertical">
            <AlternatingRowStyle BackColor="#CCCCCC" />
            <Columns>
                 <asp:TemplateField HeaderText="S/N" HeaderStyle-Width="100">
                    <ItemTemplate>
                        <%# Container.DataItemIndex + 1 %>
                    </ItemTemplate>

<HeaderStyle Width="100px"></HeaderStyle>
                </asp:TemplateField>


                <asp:TemplateField HeaderStyle-Width="100" ShowHeader="False">
                <EditItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" Text="Update"></asp:LinkButton>
                    &nbsp;<asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit" CssClass="glyphicon-edit"></asp:LinkButton>
                </ItemTemplate>
<HeaderStyle Width="100px"></HeaderStyle>
            </asp:TemplateField>

                <asp:TemplateField ShowHeader="false">
                <ItemTemplate>
            &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete"></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>

                <asp:BoundField DataField="ProjectID" HeaderText="ProjectID" InsertVisible="False" ReadOnly="True" SortExpression="ProjectID" />

                <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Project Title" SortExpression="ProjectTitle">
                    <EditItemTemplate>
                       <asp:TextBox ID="projectT" runat="server" Text='<%#Bind("ProjectTitle")%>' Height="48px" TextMode="MultiLine" Width="735px"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="ProjectTitle" runat="server" Text='<%#Bind("ProjectTitle") %>'>
                        </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:BoundField DataField="StartDate" ItemStyle-HorizontalAlign="Left" HeaderText="StartDate" DataFormatString="{0:dd/MM/yyyy}" HtmlEncode="false" SortExpression="StartDate" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="EndDate" ItemStyle-HorizontalAlign="Left" HeaderText="EndDate" DataFormatString="{0:dd/MM/yyyy}" HtmlEncode="false" SortExpression="EndDate" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="Duration" ItemStyle-HorizontalAlign="Left" HeaderText="Duration" SortExpression="Duration" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="ProjectCost" ItemStyle-HorizontalAlign="Left" HeaderText="ProjectCost" HtmlEncode="False" DataFormatString="{0:N}" SortExpression="ProjectCost" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="Currency" ItemStyle-HorizontalAlign="Left" HeaderText="Currency" SortExpression="Currency" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="PercentageOfCompletion" ItemStyle-HorizontalAlign="Left" HeaderText="% of Completion" HtmlEncode="False" DataFormatString="{0:P}" SortExpression="PercentageOfCompletion" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="PhaseType" ItemStyle-HorizontalAlign="Left" HeaderText="PhaseType" SortExpression="PhaseType" >

<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>

                <asp:TemplateField HeaderText="Type" SortExpression="Type">
                    <ItemTemplate>
                        <asp:Label ID="Type" runat="server" Text='<%# Bind("Type") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ProjectTypeID" runat="server" SelectedValue='<%# Bind("ProjectTypeID") %>' DataTextField="Type" DataValueField="ProjectTypeID" DataSourceID="SqlDataSource2"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>



                         <asp:TemplateField HeaderText="State" SortExpression="StateName">
                    <ItemTemplate>
                        <asp:Label ID="StateName" runat="server" Text='<%# Bind("StateName") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="StateID" runat="server" SelectedValue='<%# Bind("StateID") %>' DataTextField="StateName" DataValueField="StateID" DataSourceID="SqlDataSource3"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField HeaderText="LGA" SortExpression="LGName">
                    <ItemTemplate>
                        <asp:Label ID="LGName" runat="server" Text='<%# Bind("LGName") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="LGAID" runat="server" SelectedValue='<%# Bind("LGAID") %>' DataTextField="LGName" DataValueField="LGAID" DataSourceID="SqlDataSource4"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                        <asp:TemplateField HeaderText="Community" SortExpression="CommunityName">
                    <ItemTemplate>
                        <asp:Label ID="CommunityName" runat="server" Text='<%# Bind("CommunityName") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="CommunityID" runat="server" SelectedValue='<%# Bind("CommunityID") %>' DataTextField="CommunityName" DataValueField="CommunityID" DataSourceID="SqlDataSource5"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField HeaderText="Company" SortExpression="CompanyName">
                    <ItemTemplate>
                        <asp:Label ID="CompanyName" runat="server" Text='<%# Bind("CompanyName") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="CoyID" runat="server" SelectedValue='<%# Bind("CoyID") %>' DataTextField="CompanyName" DataValueField="CoyID" DataSourceID="SqlDataSource6"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                         <asp:TemplateField HeaderText="Contractor" SortExpression="Company">
                    <ItemTemplate>
                        <asp:Label ID="Company" runat="server" Text='<%# Bind("Company") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ContractorID" runat="server" SelectedValue='<%# Bind("ContractorID") %>' DataTextField="Company" DataValueField="ContractorID" DataSourceID="SqlDataSource7"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField HeaderText="Status" SortExpression="Status">
                    <ItemTemplate>
                        <asp:Label ID="Status" runat="server" Text='<%# Bind("Status") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ProjectStatusID" runat="server" SelectedValue='<%# Bind("ProjectStatusID") %>' DataTextField="Status" DataValueField="ProjectStatusID" DataSourceID="SqlDataSource8"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField HeaderText="Year" SortExpression="Year">
                    <ItemTemplate>
                        <asp:Label ID="Year" runat="server" Text='<%# Bind("Year") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="YearID" runat="server" SelectedValue='<%# Bind("YearID") %>' DataTextField="Year" DataValueField="YearID" DataSourceID="SqlDataSource9"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>

                 <asp:BoundField DataField="ProjectExistence" ItemStyle-HorizontalAlign="Left" HeaderText="Proj Existence" SortExpression="ProjectExistence" >


<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>

                <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Project Relevance" SortExpression="ProjectRelevance">
                    <EditItemTemplate>
                       <asp:TextBox ID="projectrelevance" runat="server" Text='<%#Bind("ProjectRelevance")%>' Height="204px" TextMode="MultiLine" Width="735px"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="ProjectRelevance" runat="server" Text='<%#Bind("ProjectRelevance") %>'>
                        </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Remarks" SortExpression="Remarks">
                    <EditItemTemplate>
                       <asp:TextBox ID="remark" runat="server" Text='<%#Bind("Remarks")%>' Height="204px" TextMode="MultiLine" Width="735px"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="remark01" runat="server" Text='<%#Bind("Remarks") %>'>
                        </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="CountDown">
                    <ItemTemplate>
                        <div id="myCountdownClass"><%# !string.IsNullOrEmpty(Eval("EndDate").ToString()) ? Convert.ToDateTime(Eval("EndDate")).ToString("MM'/'dd'/'yyyy") : "" %></div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>

这是我的脚本:

<script>
        // Set the date we're counting down to
        var countDownDate = new Date("Oct 5, 2017 15:37:25").getTime();

        // Update the count down every 1 second
        var x = setInterval(function () {

            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now an the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="demo"
            document.getElementById("myCountdownClass").innerHTML = days + "d " + hours + "h "
            + minutes + "m " + seconds + "s ";

            // If the count down is finished, write some text 
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("myCountdownClass").innerHTML = "PROJECT ENDED";
            }
        }, 1000);

    </script>

最佳答案

这里是如何在 GridView 中创建倒计时器的快速演示。使用 TemplateField 并将正确的日期放入 div 中。向该 div 添加一个类，以便您可以在 jQuery 中引用它。

<asp:TemplateField>
    <ItemTemplate>
        <div class="myCountdownClass"><%# Convert.ToDateTime(Eval("myDate")).ToString("MM'/'dd'/'yyyy") %></div>
    </ItemTemplate>
</asp:TemplateField>

以及 jQuery 函数

<script type="text/javascript">
    $('.myCountdownClass').each(function () {
        var date = $(this).text();
        $(this).countdown(date, function (event) {
            $(this).text(event.strftime('%D days %H:%M:%S'));
        });
    });
</script>

此演示使用此作为倒计时器:http://hilios.github.io/jQuery.countdown/

更新

要防止在数据库值为 null 时转换为日期时间时出现错误， 使用三元运算符。

<%# !string.IsNullOrEmpty(Eval("myDate").ToString()) ? Convert.ToDateTime(Eval("myDate")).ToString("MM'/'dd'/'yyyy") : "" %>

更新2

<script type="text/javascript" src="/jquery.countdown.min.js"></script>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <div class="myCountdownClass"><%# Convert.ToDateTime(Eval("myDate")).ToString("MM'/'dd'/'yyyy") %></div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <%# Convert.ToDateTime(Eval("myDate")).ToString("MM'/'dd'/'yyyy") %>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<script type="text/javascript">
    $('.myCountdownClass').each(function () {
        var date = $(this).text();
        $(this).countdown(date, function (event) {
            $(this).text(event.strftime('%D days %H:%M:%S'));
        });
    });
</script>

关于gridview asp.net 中的 javascript 计时器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45702775/

文章推荐： javascript - 键入 jQuery 时用点替换逗号

文章推荐： c++ - 在 tcp 中提升 asio 异步处理程序

文章推荐： JavaFX:是否可以为整个 TreeView 设置背景颜色？

文章推荐： javascript - 如何选择前 N 个元素？

jquery - 计时器？
我需要在文档就绪触发后 5 秒调用我的函数 abc()。这在 jQuery 中可能吗？ $(document).ready(function () { //Wait 5 seconds then
PowerShell 计时器/秒表准确性
我发现 System.Diagnostics.Stopwatch 类即使在很短的时间段(即 20 秒)内似乎也存在可测量的不准确性。对于编码为运行 20 秒的进程，我的进程显示耗时为 20.3+ 秒:
angular - 安排本地闹钟/计时器
我正在使用 Ionic Framework 使用 Angular 构建一个 Android/iPhone 食谱应用程序。功能之一应该是每个成分/步骤的警报/计时器。我猜 Ionic 是基于 Apa
具有不同图像的 Javascript 计时器
我有一个 JS 计时器脚本，从 20 秒开始倒计时 var count = 0; var speed = 1000; countdown = setInterval( function
Javascript 计时器，带停止按钮
我的 JavaScript 计时器有一个大问题。一切正常，除了 1 个按钮:停止!我不知道如何停止计数器上的所有内容(例如重置每个输入和计数器)。有什么想法可以解决这个问题吗？
Java 计时器 - 调用的函数未完成!
所以我有一个 TimerTask 任务在其 run() 中调用函数 onTimerComplete() onTimerComplete() 看起来像这样: private void onTimerC
java - 如何停止该线程内的线程/计时器？
我在 Eclipse 中的 windowbuilder 创建的 run() 方法中有计时器。我不知道如何通过另一种方法停止该计时器。例如通过添加 if(MenuWindow.gameStarted
按下按钮时的 Java 计时器
我对java很陌生，我试图在按下按钮时启动计时器，但无法启动它。我尝试了几行代码，但似乎没有任何效果。我已经声明了我的标签、文本字段和计时器: private JTextField JTFHours
当前实例上的 java 计时器
import java.util.Scanner; import java.util.Timer; import java.util.TimerTask; public class Boggle {
Javascript 计时器 - 检查还剩多长时间
我正在尝试在 JavaScript 中获取计时器的值，因此当计时器为零时它会显示不同的内容； var local_t = new Date(); local_t.setSeconds(local_t.
Jquery slider 计时器
我需要使用 jquery 为网站创建自定义 slider 。到目前为止，如果我单击按钮，我已经设法让它按照我想要的方式运行，但我想实现一个自动计时器，以便幻灯片在 5 秒后切换。这是我的 JS 代码
javascript - 个人最佳记分员/计时器
我正在制作一个计时器，记录点击“通过”按钮上的“确定”时的最长时间(个人最好成绩)。我似乎无法弄清楚如何让计数器回到 0，我确信有一种方法可以只用 2 个按钮(开始 + 通过)来完成。我希望计时器在我
当且仅当任务排队时防止关闭的 Java 计时器
我有一个 java.util.Timer 用于限制电子邮件发送(如果最近发送了状态电子邮件，那么现在不要发送，而是创建一个计时器任务以稍后发送任何新状态)。我想要的是确保最终发送所有排队的电子邮件，
用于在线考试的 Javascript 计时器
我已经建立了一个在线考试门户，允许学生使用网络浏览器在线参加考试。现在我还开发了计时器功能，用户必须在规定的时间范围内完成考试。我遇到的麻烦是，当我刷新页面时，计时器再次从新开始，例如 40 分钟。
java - 计时器 - 异步任务或线程
我想知道在一定时间内禁用按钮的最佳方法是什么。当用户使用其他按钮转到其他页面时，定时器不会被重置，按钮仍将被禁用。我读过很多关于异步任务、线程的不同方法。但是我非常不确定哪种方法最好。我希望计时器
android - 计时器 - 计时
我正在制作一个测验应用程序，我想在其中显示用户在玩游戏时所用的时间。它应该采用 HH:MM:SS 格式，从 00:00:00 开始，直到他选择答案。当用户每秒播放时，计时器应该每秒更新一次。另外，我想
服务中的 Android 计时器
您好，计划为该 Activity 开发 android 倒数计时器应用程序，当用户单击开始按钮时显示计时器倒计时并显示计时器倒计时，用户将转到剩余 Activity ，即使计时器在后台运行，如果用户单
数据库中的 PHP 计时器
我想知道是否有一种简单的方法可以使用 PHP 在数据库中创建计时器，我想在数据库中创建该行 30 分钟后将其删除。如果这不够具体，我很抱歉，但我不知道如何在其中提供更多细节，请随意发表评论，以便我可以
带对象的 Javascript 计时器
我试图制作一种与我的计时器一起使用的对象。问题是，当我只有裸函数(不在对象中)时，它就可以工作。但是当我把它放在对象内部时它不起作用。使用此代码我只能看到 00:01 当我只使用函数本身时，它工作正
带逗号的 JavaScript 计时器
这个问题已经有答案了: How to format numbers as currency strings (67 个回答) 已关闭 9 年前。我想显示从 1 到 2500 的美元计时器。当计时器增

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

gridview asp.net 中的 javascript 计时器