151

関数が実行されてから 30 秒で始まり、0 で終わる単純なカウントダウン タイマーを使用したいと考えています。ミリ秒はありません。どのようにコーディングできますか？

4

13 に答える 13

258 
var count=30;

var counter=setInterval(timer, 1000); //1000 will  run it every 1 second

function timer()
{
  count=count-1;
  if (count <= 0)
  {
     clearInterval(counter);
     //counter ended, do something here
     return;
  }

  //Do code for showing the number of seconds here
}

タイマーのコードを段落 (またはページの他の場所) に表示するには、次の行を追加します。

<span id="timer"></span>

秒を表示する場所。timer()次に、関数に次の行を挿入すると、次のようになります。

function timer()
{
  count=count-1;
  if (count <= 0)
  {
     clearInterval(counter);
     return;
  }

 document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}
于 2009-07-28T04:00:13.940 に答える
105

少し前にこのスクリプトを書きました：

使用法：

var myCounter = new Countdown({  
    seconds:5,  // number of seconds to count down
    onUpdateStatus: function(sec){console.log(sec);}, // callback for each second
    onCounterEnd: function(){ alert('counter ended!');} // final action
});

myCounter.start();

function Countdown(options) {
  var timer,
  instance = this,
  seconds = options.seconds || 10,
  updateStatus = options.onUpdateStatus || function () {},
  counterEnd = options.onCounterEnd || function () {};

  function decrementCounter() {
    updateStatus(seconds);
    if (seconds === 0) {
      counterEnd();
      instance.stop();
    }
    seconds--;
  }

  this.start = function () {
    clearInterval(timer);
    timer = 0;
    seconds = options.seconds;
    timer = setInterval(decrementCounter, 1000);
  };

  this.stop = function () {
    clearInterval(timer);
  };
}
于 2009-07-28T04:59:41.183 に答える
56

これまでのところ、答えは即座に実行されるコードに依存しているようです。タイマーを 1000 ミリ秒に設定すると、実際には約 1008 ミリ秒になります。

これを行う方法は次のとおりです。

function timer(time,update,complete) {
    var start = new Date().getTime();
    var interval = setInterval(function() {
        var now = time-(new Date().getTime()-start);
        if( now <= 0) {
            clearInterval(interval);
            complete();
        }
        else update(Math.floor(now/1000));
    },100); // the smaller this number, the more accurate the timer will be
}

使用するには、次のように呼び出します。

timer(
    5000, // milliseconds
    function(timeleft) { // called every step to update the visible countdown
        document.getElementById('timer').innerHTML = timeleft+" second(s)";
    },
    function() { // what to do after
        alert("Timer complete!");
    }
);
于 2012-07-04T22:33:35.200 に答える
21

誰かが分と秒のためにそれを必要とするなら、これは別のものです:

    var mins = 10;  //Set the number of minutes you need
    var secs = mins * 60;
    var currentSeconds = 0;
    var currentMinutes = 0;
    /* 
     * The following line has been commented out due to a suggestion left in the comments. The line below it has not been tested. 
     * setTimeout('Decrement()',1000);
     */
    setTimeout(Decrement,1000); 

    function Decrement() {
        currentMinutes = Math.floor(secs / 60);
        currentSeconds = secs % 60;
        if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
        secs--;
        document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
        if(secs !== -1) setTimeout('Decrement()',1000);
    }
于 2013-03-11T22:48:12.300 に答える
3 

// Javascript Countdown
// Version 1.01 6/7/07 (1/20/2000)
// by TDavid at http://www.tdscripts.com/
var now = new Date();
var theevent = new Date("Sep 29 2007 00:00:01");
var seconds = (theevent - now) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
ID = window.setTimeout("update();", 1000);

function update() {
  now = new Date();
  seconds = (theevent - now) / 1000;
  seconds = Math.round(seconds);
  minutes = seconds / 60;
  minutes = Math.round(minutes);
  hours = minutes / 60;
  hours = Math.round(hours);
  days = hours / 24;
  days = Math.round(days);
  document.form1.days.value = days;
  document.form1.hours.value = hours;
  document.form1.minutes.value = minutes;
  document.form1.seconds.value = seconds;
  ID = window.setTimeout("update();", 1000);
}
<p><font face="Arial" size="3">Countdown To January 31, 2000, at 12:00: </font>
</p>
<form name="form1">
  <p>Days
    <input type="text" name="days" value="0" size="3">Hours
    <input type="text" name="hours" value="0" size="4">Minutes
    <input type="text" name="minutes" value="0" size="7">Seconds
    <input type="text" name="seconds" value="0" size="7">
  </p>
</form>

于 2012-07-07T17:33:53.253 に答える
2

受け入れられた回答を拡張したり、マシンがスリープ状態になったりすると、タイマーの動作が遅れる場合があります。少しの処理を犠牲にして、真の時間を得ることができます。これにより、実際の残り時間が得られます。

<span id="timer"></span>

<script>
var now = new Date();
var timeup = now.setSeconds(now.getSeconds() + 30);
//var timeup = now.setHours(now.getHours() + 1);

var counter = setInterval(timer, 1000);

function timer() {
  now = new Date();
  count = Math.round((timeup - now)/1000);
  if (now > timeup) {
      window.location = "/logout"; //or somethin'
      clearInterval(counter);
      return;
  }
  var seconds = Math.floor((count%60));
  var minutes = Math.floor((count/60) % 60);
  document.getElementById("timer").innerHTML = minutes + ":" + seconds;
}
</script>
于 2017-10-19T19:18:40.130 に答える
1

パフォーマンスのために、高速ループのために setInterval/setTimeout の代わりにrequestAnimationFrameを安全に使用できるようになりました。

setInterval/setTimeout を使用する場合、ループ タスクが間隔よりも多くの時間を要している場合、ブラウザーは単に間隔ループを延長し、完全なレンダリングを続行します。これは問題を引き起こしています。setInterval/setTimeoutの過負荷が数分続くと、タブ、ブラウザー、またはコンピューター全体がフリーズする可能性があります。

インターネット デバイスはさまざまなパフォーマンスを備えているため、一定の間隔をミリ秒単位でハードコーディングすることはまったく不可能です。

Date オブジェクトを使用して、開始 Date Epoch と現在の Date Epoch を比較します。これは他のすべてよりもはるかに高速で、ブラウザは安定した60FPS (1000 / 60 = 16.66ms by frame ) -まばたきの 4 分の 1 - ですべてを処理し、ループ内のタスクがそれ以上を必要とする場合、ブラウザはいくつかの再描画をドロップします。

これにより、目が気付く前に余裕ができます (人間 = 24FPS => 1000 / 24 = フレームごとに 41.66 ミリ秒 = 流体アニメーション!)

https://caniuse.com/#search=requestAnimationFrame

/* Seconds to (STRING)HH:MM:SS.MS ------------------------*/
/* This time format is compatible with FFMPEG ------------*/
function secToTimer(sec){
  const o = new Date(0), p =  new Date(sec * 1000)
  return new Date(p.getTime()-o.getTime()).toString().split(" ")[4] + "." + p.getMilliseconds()
}

/* Countdown loop ----------------------------------------*/
let job, origin = new Date().getTime()
const timer = () => {
  job = requestAnimationFrame(timer)
  OUT.textContent = secToTimer((new Date().getTime() - origin) / 1000)
}

/* Start looping -----------------------------------------*/
requestAnimationFrame(timer)

/* Stop looping ------------------------------------------*/
// cancelAnimationFrame(job)

/* Reset the start date ----------------------------------*/
// origin = new Date().getTime()
span {font-size:4rem}
<span id="OUT"></span>
<br>
<button onclick="origin = new Date().getTime()">RESET</button>
<button onclick="requestAnimationFrame(timer)">RESTART</button>
<button onclick="cancelAnimationFrame(job)">STOP</button>

于 2019-08-26T18:19:38.160 に答える
0

純粋なJSで次のようにできます。関数に秒数を指定するだけで、残りは実行されます。

var insertZero = n => n < 10 ? "0"+n : ""+n,
   displayTime = n => n ? time.textContent = insertZero(~~(n/3600)%3600) + ":" +
                                             insertZero(~~(n/60)%60) + ":" +
                                             insertZero(n%60)
                        : time.textContent = "IGNITION..!",
 countDownFrom = n => (displayTime(n), setTimeout(_ => n ? sid = countDownFrom(--n)
                                                         : displayTime(n), 1000)),
           sid;
countDownFrom(3610);
setTimeout(_ => clearTimeout(sid),20005);
<div id="time"></div>

于 2016-10-19T17:03:38.843 に答える