的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（）函數。但我面臨一個問題。在我開始解釋我的問題之前，我讀了相同的問題，但是我沒有找到我的答案，所以我決定自己提問！我有三個進度條，其中一個顯示秒，一分鐘和一個小時。當我運行這個時，他們所有的工作只有一次。我不知道我的問題在哪裏。我甚至爲其中一個寫了一個正常的函數，但是我沒有看到任何區別。

和問題！

我編輯了我的代碼，但仍然沒有區別！

來源

2016-12-16 Mohammad Amin

哪裏是循環？ – madalinivascu

你碰巧在另一個標籤中運行你的代碼嗎？如果該選項卡未激活，則setInterval和setTimeout將表現不一致，因爲許多瀏覽器都針對省電進行了優化。 – nardeas

在Jsfiddle/Codepen中創建演示。這將有助於理解問題。 – Manwal

在這裏你去;）你需要在每個迭代

$(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>

來源

2016-12-16 07:58:46 Slonski

感謝您的迴應...我編輯了mu代碼，但仍然沒有看到任何區別！ –

你能再看一遍嗎？ –

謝謝你現在好了!!!!!!!! –

你忘了更新的currentdate每次的價值重置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); 
     });

來源

2016-12-16 08:25:31

的setInterval只能一次

回答

相關問題