setInterval只工作一次 [英] setInterval only works one time
本文介绍了setInterval只工作一次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
$(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()函数.但是我遇到了一个问题.在开始解释我的问题之前，我读过同样的问题，但是我没有找到答案，所以我决定自己问一遍！ 我有三个进度条，其中一个显示秒，一分钟和一小时.当我运行此命令时，它们都只能工作一次.我不知道我的问题在哪里.我什至为其中之一编写了一个正常函数，但没有发现任何区别.
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.
还有问题！
我编辑了代码，但没有任何区别！
I EDITED MY CODE BUT STILL NO DIFFERENCE!
推荐答案
在这里;)您需要在每次迭代中重置CurrentDate
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>
这篇关于setInterval只工作一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
