の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（）関数を使用する必要がありましたプログレスバーを作り始めました。私は問題に直面した。私の問題を説明する前に、私は同じ問題を読んだが、私は答えを見つけられなかったので、私はそれを自分で尋ねた。私は1秒、1分、1時間を示す3つのプログレスバーを持っています。私がこれを実行すると、それらのすべてが1回だけ働きます。私はどこに問題があるのか分かりません。私はそれらの1つのために正常な機能を書いても、私は何の違いも見ませんでした。

と問題！

私は私のコードを編集しましたが、相違はありません！

出典

2016-12-16 Mohammad Amin

ループはどこにありますか？ – madalinivascu

別のタブでコードを実行していますか？タブがアクティブでない場合、setIntervalとsetTimeoutは、節電のために最適化された多くのブラウザのために一貫して動作しません。 – nardeas

Jsfiddle/Codepenでデモを作成します。問題を理解するのに役立ちます。 – Manwal

ここに行く;）あなたは、あなたが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>

出典

2016-12-16 07:58:46 Slonski

お返事ありがとうございます...私はミューコードを編集しましたが、まだ違いは見られません！ –

あなたはそれをもう一度見ることができますか？ –

ありがとうございました!!!!!!!! –

でCurrentDateをリセットする必要があります。ワーキング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); 
     });

出典

2016-12-16 08:25:31

のsetIntervalは一度だけ

答えて

関連する問題