$(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（）函数。但我遇到了一个问题。在我开始解释我的问题之前，我读了同样的问题，但我没有找到答案所以我决定自己问一下！ 我有三个进度条，其中一个显示秒，一分钟和一个小时。当我运行它时，它们都只工作一次。我不知道我的问题在哪里。我甚至为其中一个人写了一个正常的功能，但我没有看到任何区别。
和问题！
我编辑了我的代码，但仍然没有差异！
答案 0 :(得分：1)
这里你去;）你需要在每次迭代中重置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>
答案 1 :(得分：0)
您忘记每次都更新currentDate的值。 在这里工作Plunkr- 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);
});