0

I have made a countdown in html and javascript. However, I need it to refresh every second for the seconds in the time, but I do not want the whole page to refresh. I have tried:

<meta http-equiv="refresh" content="1">

However, this refreshes the whole page and not just the section that I need to. Is it possible to just refresh the div. Or is there another way that I can get the page to update each second without refreshing. I have tried to look for answers, however, they all involve php and I don't yet know how to use it. Any help would be appreciated. This is my html and javascript so far:

    <p>Date: <span id="date"></span></p>
    <p>Time: <span id="time"></span></p>
    <p>Countdown Time: <span id="release"></span></p>
    <p id="timeuntil">Time Until: 
    <span id="secs"></span><span id="sectxt"></span>
    <span id="mins"></span><span id="mintxt"></span>
    <span id="hours"></span><span id="hourtxt"></span>
    </p>
    
    <script>
    var ct = new Date();
    var dt = new Date("2021-03-19:015:00");
    
    var ctsecs = ct.getSeconds();   var dtsecs = dt.getDate();
    var tusecs = dtsecs - ctsecs;   var secs_text;
    var ctmins = ct.getMinutes();   var dtmins = dt.getMinutes();
    var tumins = dtmins - ctmins;   var month_text;
    var cthour = ct.getHours();     var dthour = dt.getHours(); 
    var tuhour = dthour - cthour;   var hour_text;
    //Fixing -ve values
    if (tusecs < 0){tusecs = tusecs + 30; tumins = tumins - 1;}
    if (tumins < 0){tumins = tumins + 12; tuhour = tuhour - 1;}
    
    if (tuhour == 1){hour_text = " hour";} else {hour_text = " hours";}
    if (tumins == 1){mins_text = " minute, ";} else {mins_text = " minutes, ";}
    if (tusecs == 1){secs_text = " second, ";} else {secs_text = " seconds, ";}
    //Defining "Now" and "In the Past"
    if (tusecs + tumins + tuhour == 0){tusecs="";sec_text="";tumins="";
    mins_text="";tuhour = "";hour_text = "NOW";}
    if (tusecs<0 || tumins<0 || tuhour<0){tusecs="";secs_text="";tumins="";
    mins_text="";tuhour = "";hour_text = "In The Past";}
    
    document.getElementById("date").innerHTML    = ct.toLocaleDateString();
    document.getElementById("time").innerHTML    = ct.toLocaleTimeString();
    document.getElementById("release").innerHTML = dt.toLocaleDateString();
    document.getElementById("secs").innerHTML    = tusecs;
    document.getElementById("sectxt").innerHTML  = sec_text;
    document.getElementById("mins").innerHTML  = tumins;
    document.getElementById("mintxt").innerHTML  = mins_text;
    document.getElementById("hours").innerHTML   = tuhour;
    document.getElementById("hourtxt").innerHTML  = hour_text;
    </script>
  • You can use a timer to refresh the html of the div by selecting it. – Rifat Bin Reza Feb 19 '21 at 02:34
  • @RifatBinReza Thankyou for your quick response. Would you be able to provide an example of how to do that? –  Feb 19 '21 at 02:35
  • Can you add your existing countdown code to the post – Abir Taheer Feb 19 '21 at 02:37
  • Hi, refreshing the page for a countdown time would be pointless of you're not using a server side script because the page would reset on every reload. You might be looking for updating the time on a div every second. If you can add your existing div code, or a representation of what it should look like, I can add an anser depending on that. Or if you can figure out, you can use the setInterval(function (){}, 1000); in js to make a code run every second. Inside the function, do document.getElementById('countdown').innerHTML = document.getElementById('countdown').innerHTML-1. don't gorget to giv – Ajith Gopi Feb 19 '21 at 02:44
  • ... the div the id countdown – Ajith Gopi Feb 19 '21 at 02:45
  • @AjithGopi I have added my current code for the countdown. I am relatively new to JS so any other recommendations are welcome. –  Feb 19 '21 at 02:49
  • @DarcyParsley I have already answered to a similar question which you can find here [How to create a counter from user input?](https://stackoverflow.com/a/65575896/6480803) – Rifat Bin Reza Feb 19 '21 at 02:54
  • You can follow this tutorial to achieve it using Vanilla js: https://www.w3schools.com/howto/howto_js_countdown.asp (take a not of that site, you'll find all the basics there. – Ajith Gopi Feb 19 '21 at 02:55

0 Answers0