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 () {
                var CurrentDate = new Date();
                document.getElementById("UpperArea").innerHTML = CurrentDate.toDateString();
                var t1 = setInterval(function () { SecondsProgress(); }, 100);
                function SecondsProgress()
                {
                  CurrentDate = new Date();
                    var Seconds = CurrentDate.getSeconds();
                    var PercentOfTotalS = (Seconds / 60) * 100;
                    $("#SProgressBar").css("width", PercentOfTotalS + "%");
                    $("#SProgressBar").text(Seconds);
                }
                var t2 = setInterval(function () {
                  CurrentDate = new Date();
                    var Minutes = CurrentDate.getMinutes();
                    var PercentOfTotalM = (Minutes / 60) * 100;
                    $("#MProgressBar").css("width", PercentOfTotalM + "%");
                    $("#MProgressBar").text(Minutes);
                }, 100);
                var t3 = setInterval(function () {
                    CurrentDate = new Date();
                    var Hours = CurrentDate.getHours();
                    var PercentOfTotalH = (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;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="UpperArea"></div>
<div id="HProgressBar"></div>
<div id="MProgressBar"></div>
<div id="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 () {
            var CurrentDate = new Date();
            document.getElementById("UpperArea").innerHTML = CurrentDate.toDateString();
            var t1 = setInterval(function () { SecondsProgress(); }, 100);
            function SecondsProgress()
            {
                CurrentDate = new Date();
                var Seconds = CurrentDate.getSeconds();
                var PercentOfTotalS = (Seconds / 60) * 100;
                $("#SProgressBar").css("width", PercentOfTotalS + "%");
                document.getElementById("SProgressBar").innerText = Seconds;
            }
            var t2 = setInterval(function () {
                CurrentDate = new Date();
                var Minutes = CurrentDate.getMinutes();
                var PercentOfTotalM = (Minutes / 60) * 100;
                $("#MProgressBar").css("width", PercentOfTotalM + "%");
                document.getElementById("MProgressBar").innerText = Minutes;
            }, 100);
            var t3 = setInterval(function () {
                CurrentDate = new Date();
                var Hours = CurrentDate.getHours();
                var PercentOfTotalH = (Hours / 24) * 100;
                $("#HProgressBar").css("width", PercentOfTotalH + "%");
                document.getElementById("HProgressBar").innerText = Hours;
            }, 100);
        });