$(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>我开始制作一个可以处理当前日期和时间的进度条，为此，我不得不使用setInterval（）函数。但是我遇到了一个问题。在我开始解释我的问题之前，我读过同样的问题，但是我没有找到答案，所以我决定自己提问！
我有三个进度条，其中一个显示秒，一分钟和一小时。当我运行这个的时候他们全部只能工作一次。我不知道我的问题在哪里。我什至为其中之一编写了一个正常函数，但我没有发现任何区别。
和问题！
我编辑了我的代码，但没有任何区别！
最佳答案
开始吧;）您需要在每次迭代中重置CurrentDate
$(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>关于javascript - setInterval只工作一次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41179562/