Click here to Skip to main content
15,938,022 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi everyone.
My scenario is that. I have a repeater and item template has a span I get some date from database and I want to show like countdown to customers.

I try to wrote like this.

<script type="text/javascript">
        jQuery(document).ready(function() {
         var _second = 1000;
            var _minute = _second * 60;
            var _hour = _minute * 60;
            var _day = _hour * 24;
            var timer;

            $("#carCampaign span").each(function (index, value) {
                var data = $(this).attr('data');
                if (data == 'timer') {
                    var end = $(this).attr('end');
                    var date = new Date(end);

                    function showRemaining() {
                        var now = new Date();
                        var distance = date - now;
                        if (distance < 0) {

                            document.getElementById('#Label3' + i).innerHTML = 'EXPIRED!';

                        var hours = Math.floor((distance % _day) / _hour);
                        var minutes = Math.floor((distance % _hour) / _minute);
                        var seconds = Math.floor((distance % _minute) / _second);

                        document.getElementById('Label3').innerHTML = hours + 'hrs ';
                        document.getElementById('Label3').innerHTML += minutes + 'mins ';
                        document.getElementById('Label3').innerHTML += seconds + 'secs';
                        $(this).innerHTML = hours;


                    timer = setInterval(showRemaining, 1000);


  <div id="carCampaign">
                <asp:Repeater runat="server" ID="rptOpportunities" OnItemDataBound="rptOpportunities_ItemDataBound" OnItemCommand="rptOpportunities_ItemCommand">
                                <div class="panel-body">
                                    <a href="#anyword">
                                        <div class="row">
                                            <div class="col-md-4 search-img">
                                                <asp:Image ID="imageCar" itemprop="image" CssClass="img-responsive" runat="server" />
                                                <div class="row weight-700"><span class="fa fa-clock-o" style="padding-removed 15px;"></span> </div>
                                                <div class="row">
                                                    <div class="coming-soon-plugin" style="font-size: 2.2em; padding-removed 15px; margin-removed -35px;">
                                                        <asp:Label ID="Label3" runat="server" ClientIDMode="Static" CssClass="timer" Text='<%#Eval("DueDateTime") %>' data="timer" end='<%#
Eval("DueDateTime") %>'><br />
                                                        <asp:Label ID="Label1" runat="server"></asp:Label>
                                                        <br />
                                                        <asp:Label ID="Label2" runat="server" />

But that time just first span converted to coundown another does not work.
and I assume that every time countdown try to work the first span. Do you have any suggest?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900