setInterval only works one time
Question
$(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!
2 answers
solution1
1 ACCPTED 2016-12-16 07:58:46
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>
solution2
0 2016-12-16 08:25:31
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);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
stop setInterval only works one time, why?
Javascript Function setInterval() works only one time
clearInterval() only works when time in setInterval() is constant
Why setInterval only works fine at first time?
setInterval() not repeating. Works only 1 time
setInterval works just one time, then stops
Javascript clearInterval works only for one setInterval on page
Javascript setInterval runs only one time
function only works with setInterval
Event works only one time
Related Tags