Setinterval Only Works One Time

i started to make a progress bar which works with current date and time and for that, I had to use setInterval() function. but I faced a problem. before I start explaining my prob

Solution 1:

Here you go ;) You need to reset CurrentDate in each iteration

$(document).ready(function () {
                varCurrentDate = newDate();
                document.getElementById("UpperArea").innerHTML = CurrentDate.toDateString();
                var t1 = setInterval(function () { SecondsProgress(); }, 100);
                functionSecondsProgress()
                {
                  CurrentDate = newDate();
                    varSeconds = CurrentDate.getSeconds();
                    varPercentOfTotalS = (Seconds / 60) * 100;
                    $("#SProgressBar").css("width", PercentOfTotalS + "%");
                    $("#SProgressBar").text(Seconds);
                }
                var t2 = setInterval(function () {
                  CurrentDate = newDate();
                    varMinutes = CurrentDate.getMinutes();
                    varPercentOfTotalM = (Minutes / 60) * 100;
                    $("#MProgressBar").css("width", PercentOfTotalM + "%");
                    $("#MProgressBar").text(Minutes);
                }, 100);
                var t3 = setInterval(function () {
                    CurrentDate = newDate();
                    varHours = CurrentDate.getHours();
                    varPercentOfTotalH = (Hours / 24) * 100;
                    $("#HProgressBar").css("width", PercentOfTotalH + "%");
                    $("#HProgressBar").text(Hours);
                }, 100);
            })

#SProgressBar, #MProgressBar, #HProgressBar{
  border:1px solid;
  padding:3px;
  margin-bottom:3px;
  border-radius:3px;
  background:#ccc;
  transition: width .5s;
}

#HProgressBar {background: #eee;}

#MProgressBar {background: #ddd;}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="UpperArea"></div><divid="HProgressBar"></div><divid="MProgressBar"></div><divid="SProgressBar"></div>

Solution 2:

You forgot to update value of currentDate everytime. Working Plunkr here- https://plnkr.co/edit/VcJMpkjsCQFy1qmoWfYG?p=preview

$(document).ready(function () {
            varCurrentDate = newDate();
            document.getElementById("UpperArea").innerHTML = CurrentDate.toDateString();
            var t1 = setInterval(function () { SecondsProgress(); }, 100);
            functionSecondsProgress()
            {
                CurrentDate = newDate();
                varSeconds = CurrentDate.getSeconds();
                varPercentOfTotalS = (Seconds / 60) * 100;
                $("#SProgressBar").css("width", PercentOfTotalS + "%");
                document.getElementById("SProgressBar").innerText = Seconds;
            }
            var t2 = setInterval(function () {
                CurrentDate = newDate();
                varMinutes = CurrentDate.getMinutes();
                varPercentOfTotalM = (Minutes / 60) * 100;
                $("#MProgressBar").css("width", PercentOfTotalM + "%");
                document.getElementById("MProgressBar").innerText = Minutes;
            }, 100);
            var t3 = setInterval(function () {
                CurrentDate = newDate();
                varHours = CurrentDate.getHours();
                varPercentOfTotalH = (Hours / 24) * 100;
                $("#HProgressBar").css("width", PercentOfTotalH + "%");
                document.getElementById("HProgressBar").innerText = Hours;
            }, 100);
        });