Display count down timer based on specified hour minute and second in JavaScript and jQuery

nauna

SOLVED CLOSED ACTIVE ANSWERED
User: nauna
Posted: on May 05, 2022 11:01 PM
Forum: JavaScript
Answer: 1
Views: 5753
Sample Code: Download

hello,

i have this JavaScript count down timer which works fine, what i want is instead of end date, i want to pass only remaining hours min and second and based on that it can run the timer, because if i pass server date, so JavaScript fetch the client date time and it mismatch

Please advice

<script>
    window.onload = ShowProgressBar();
    function ShowProgressBar() {
        //var d = new Date().getTime();
        //d.toLocaleString('en-US', { timeZone: 'US/Pacific' })

        //alert(d);
        // Set the date we're counting down to
        var myHidden = document.getElementById("<%= hdnenddate.ClientID %>").value;

        var lbltimer = document.getElementById("<%= lbltimer.ClientID %>");

        //alert(myHidden);
        var countDownDate = new Date(myHidden).getTime();

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

            // Get today's date and time
            var now = new Date().getTime();

                <%-- var now = new Date('<%=DateTime.Now.ToString("MMMM dd, yyyy, HH:mm:ss")%>').getTime();--%>

            // Find the distance between now and 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"
            lbltimer.innerText = minutes + " Minutes " + seconds + " Seconds ";

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                lbltimer.innerText = "EXPIRED";
            }
        }, 1000);
    };
</script>

arjunv

0 2

Reply
ANSWER
User: arjunv
Replied: on May 06, 2022 10:45 PM
Report

Hi nauna,

Please refer below sample.

Note: For this sample i have used temporary DataTable. For more details refer How to create Temporary Table in ASP.Net using C# and VB.Net.

HTML

<asp:ListView ID="ListView1" runat="server">
    <ItemTemplate>
        <div id="dvTimes">
            Start Time:<asp:Label ID="lblStartDateTime" Text='<%# Eval("StartDate") %>' runat="server"></asp:Label>
            <br />
            End Time:<asp:Label ID="lblEndDateTime" Text='<%# Eval("EndDate") %>' runat="server"></asp:Label>
            <br />
            Time Difference:<asp:Label ID="lblTimer" runat="server"></asp:Label>
        </div>
        <hr />
    </ItemTemplate>
</asp:ListView>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(function () {
        setInterval(function () {
            $("[id*=dvTimes]").each(function () {
                var startTime = $(this).find("[id*=lblStartDateTime]").html();
                //var endTime = $(this).find("[id*=lblEndDateTime]").html();
                var hour = 5;
                var min = 32;
                var sec = 10;
                var endTime = new Date(startTime);
                endTime.setHours(endTime.getHours() + hour);
                endTime.setMinutes(endTime.getMinutes() + min);
                endTime.setSeconds(endTime.getSeconds() + sec);
                $(this).find("[id*=lblTimer]").html(GetTimer(startTime, endTime));
            });
        }, 1000);
    });

    function GetTimer(startDate, endDate) {
        var startDate = new Date(startDate).getTime();
        var endDate = new Date(endDate).getTime();
        // Time calculations for days, hours, minutes and seconds
        var countDownDate = endDate;
        var now = new Date().getTime();
        var distance = countDownDate - now;
        var obj = {};
        obj.days = Math.floor(distance / (1000 * 60 * 60 * 24));
        obj.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        obj.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        obj.seconds = Math.floor((distance % (1000 * 60)) / 1000);

        return 'Days:' + obj.days + ' Hours:' + obj.hours + ' Minutes:' + obj.minutes + ' Seconds:' + obj.seconds;

    };
</script>

Namespaces

using System.Data;

VB.Net

Imports System.Data

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] {
            new DataColumn("StartDate"),
            new DataColumn("EndDate")
        });
        dt.Rows.Add("2022/04/22", "2022/05/27");
        dt.Rows.Add("2022/04/25", "2022/05/01");
        this.ListView1.DataSource = dt;
        this.ListView1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("StartDate"), New DataColumn("EndDate")})
        dt.Rows.Add("2022/04/22", "2022/05/27")
        dt.Rows.Add("2022/04/25", "2022/05/01")
        Me.ListView1.DataSource = dt
        Me.ListView1.DataBind()
    End If
End Sub

Screenshot

Display count down timer based on specified hour minute and second in JavaScript and jQuery

Company

Explore

Follow us

Contact Us