javascript倒计时器不显示在gridview中 [英] javascript countdown timer not showing in gridview

问题描述

我已经使用硬编码日期实现了此JavaScript，并且它正常显示，我已经在griview中尝试过它，但它显示的是我的数据库的结束日期而没有显示倒计时，但是我想要从enddate数据库：另外，当倒计时结束时，它应该显示一条消息：项目结束请朋友帮我解决问题。

  < script type =text / javascriptsrc =../ Scripts / jquery-3.1.1.min.js>< / script> 
< script type =text / javascriptsrc =../ Scripts / jquery.countdown.min.js>< / script> 
< script type =text / javascriptsrc =../ Scripts / jquery.countdown.js>< / script> 
 
 
< asp：TemplateField HeaderText =CountDownItemStyle-Width =300px> 
< ItemTemplate> 
< div id =myCountdownClass><％＃！string.IsNullOrEmpty（Eval（EndDate）。ToString（））？ Convert.ToDateTime（Eval（EndDate））。ToString（MM/'dd'/'yyyy）：％>< / div> 
< / ItemTemplate> 
< / asp：TemplateField> 
< /列> 
 
< / 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> 
  

解决方案

code>在你的模板中，但是你试图在你的javascript中选择一个类（ $（'。myCountdownClass'））。更改此项：

 < div id =myCountdownClass> b 
 
 
 
 
 
 < div class =myCountdownClass> 
  

以下是工作示例（检查 script.js 文件）：

http：// embed。 plnkr.co/uffoqIjhqvvV7lzFlmzu/

I have implemented this javascript with a hard coded date and it is displaying properly, I have tried it in a griview but it is rather showing the enddate from my database without showing the countdown, but i want to be getting the enddate from the database: Also, when the countdown is over it should display a message: "Project over" Please friends help me out.

<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>

解决方案

You specified id in your template, but you're trying to select a class in your javascript ($('.myCountdownClass')). Change this:

<div id="myCountdownClass">

to this:

<div class="myCountdownClass">

Here's the working example (check script.js file):

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

这篇关于javascript倒计时器不显示在gridview中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！