javascript倒计时器未在gridview中显示

时间:2017-08-25 12:15:44

标签: javascript asp.net gridview countdowntimer

我已经实现了这个带有硬编码日期的javascript并且显示正常,我已经在griview中尝试了它但是它显示了我的数据库的enddate而没有显示倒计时,但我希望得到结束日期数据库:此外,当倒计时结束时,它应显示一条消息:“项目结束”请朋友们帮助我。

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


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

        </asp:GridView>

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

        </script>

1 个答案:

答案 0 :(得分:0)

您在模板中指定了id,但是您尝试在javascript($('.myCountdownClass'))中选择一个类。改变这个:

<div id="myCountdownClass">

到此:

<div class="myCountdownClass">

以下是工作示例(检查script.js文件):

http://embed.plnkr.co/uffoqIjhqvvV7lzFlmzu/