CODEWITHSUNDEEP
javascriptjquerysetinterval
Mohammad Amin
Mohammad Amin

Reputation: 47

setInterval only works one time

$(document).ready(function () {
                var CurrentDate = new Date();
                document.getElementById("UpperArea").innerHTML = CurrentDate.toDateString();
                var t1 = setInterval(function () { SecondsProgress(); }, 100);
                function SecondsProgress()
                {
                    var Seconds = CurrentDate.getSeconds();
                    var PercentOfTotalS = (Seconds / 60) * 100;
                    $("#SProgressBar").css("width", PercentOfTotalS + "%");
                    $("#SProgressBar").text(Seconds);
                }
                var t2 = setInterval(function () {
                    var Minutes = CurrentDate.getMinutes();
                    var PercentOfTotalM = (Minutes / 60) * 100;
                    $("#MProgressBar").css("width", PercentOfTotalM + "%");
                    $("#MProgressBar").text(Minutes);
                }, 100);
                var t3 = setInterval(function () {
                    var Hours = CurrentDate.getHours();
                    var PercentOfTotalH = (Hours / 24) * 100;
                    $("#HProgressBar").css("width", PercentOfTotalH + "%");
                    $("#HProgressBar").text(Hours);
                }, 100);
            })
*
{
    margin:0px;
    padding:0px;
    border:0px;
}
#MainContent
{
    border-radius:50px;
    margin:80px auto;
    width:800px;;
    height:600px;
    background-color:#212121;
}
#UpperArea
{
    width:800px;
    height:300px;
    border-bottom:0.5px dashed #585858;
    line-height:300px;
    text-align:center;
    color:white;
    font-family:'Open Sans';
    font-size:85px;
}
.LowerDiv
{
    width:600px;
    margin:50px auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="TimeProgress.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />

</head>
<body>
    <div id="MainContent">
        <div id="UpperArea"></div>
        <div id="LowerArea">
            <div id="SProgress" class="progress LowerDiv">
                <div id="SProgressBar" class="progress-bar progress-bar-success " role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0%">

                </div>
            </div>
            <div id="MProgress" class="progress LowerDiv">
                <div id="MProgressBar" class="progress-bar progress-bar-info " role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0%">

                </div>
            </div>
            <div id="HProgress" class="progress LowerDiv">
                <div id="HProgressBar" class="progress-bar progress-bar-danger " role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0%">

                </div>
            </div>
        </div>
     </div>
  </body>

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 problem, I read same problems but I didn't find my answer so I decided to ask it myself! I have three progress bar which one shows the seconds , one minutes and one hours. all of them work only one time when i run this . i don't know where is my problem. i even write a normal function for one of them but I didn't see any difference.

and the problem!

I EDITED MY CODE BUT STILL NO DIFFERENCE!

Upvotes: -1

Views: 336

Answers (2)

swati.jain.contributor
swati.jain.contributor

Reputation: 1

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);
        });

Upvotes: 0

Slonski
Slonski

Reputation: 834

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>

Upvotes: 1

Related Questions