간단한 자바 스크립트 카운트 다운 타이머 코드?


147

함수가 실행될 때부터 30 초에서 시작하여 0에서 끝나는 간단한 카운트 다운 타이머를 사용하고 싶습니다. 밀리 초가 없습니다. 어떻게 코딩 할 수 있습니까?

답변:


255
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
}

답변 해주셔서 감사합니다. 타이머가 단락에 나타나기 때문에 사용하기가 어렵습니다. 단락 중간에 30, 29, 28 등을 어떻게 넣을 수 있습니까?
Mike

1
나는 어떻게 단락 :)에 타이머를 표시하는 방법을 보여 내 대답을 편집
찬성 투표를 클릭

2
단락의 한가운데 (가로) : <p id = "timer"style = "text-align : center"> </ p>
Alsciende

클릭하면 타이머에 "0 초"만 표시됩니다. 최종적인 경우가 아니라 감소 후에 innerHTML 업데이트를 넣어야합니다.
Alsciende

1
안녕하세요, 어떻게 버튼을 눌렀을 때만 페이지로드시 타이머를 중지시킬 수 있습니까? 또한 타이머가 이미 종료 된 후 버튼을 누를 때 타이머를 재설정하려면 어떻게해야합니까?
crmepham

104

얼마 전에이 스크립트를 작성했습니다.

용법:

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);
  };
}

1
나는 다른 사람 대신 이것을 사용하고 싶습니다. 내가 시작 번호를 다시 시작해야했을 때, 나는 이것이 잘 작동하는 것을 볼 수 있습니다 ..
Oki Erie Rinaldi

우연히 타이머를 중지해야하는 경우 어떻게해야합니까?
SIJ

@SIJ myCounter.stop();
R3tep

54

지금까지 답변은 즉시 실행되는 코드에 의존하는 것 같습니다. 타이머를 1000ms로 설정하면 실제로는 약 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!");
    }
);

2
당신이 말한대로 그것을 발견 할 수있는 유일한 방법입니다!
mcella

3
나는 한 가지 경고와 함께 엄지 손가락을 썼습니다. 표시 목적으로 아마도 바닥 대신 천장 (Math.ceil ())을 보여주고 싶을 것입니다. 경고가 발생하기 전에 초에 시계가 0에 도달하면 실제로 방향이 어긋납니다. (물론 complete () 전에 update ()를 추가로 호출해야합니다.)
Paul Williams

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);
    }

setTimeout의 첫 번째 매개 변수에 문자열을 전달해서는 안됩니다 setTimeout(Decrement, 1000). stackoverflow.com/questions/6232574/…
Scottux

제안 해 주셔서 감사합니다. 스크립트를 업데이트했습니다.
Layton Everson

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>


8
이 스크립트는 90 년대의 매우 나쁜 관행을 사용합니다. 또한 1.5 시간은 2 시간이 아닙니다. 1 시간 30 분입니다. 다음을 사용 Math.floor하지 말아야합니다Math.round
corbacho

3

@ClickUpvote의 답변을 수정했습니다 .

당신은 사용할 수 있습니다 인생 (즉시 호출 기능 식) 조금 더 쉽게 그것을 확인하고 재귀를 :

var i = 5;  //set the countdown
(function timer(){
    if (--i < 0) return;
    setTimeout(function(){
        console.log(i + ' secs');  //do stuff here
        timer();
    }, 1000);
})();


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>

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>


0

@Layton Everson이 제시 한 솔루션을 기반으로 시간, 분 및 초를 포함한 카운터를 개발했습니다.

var initialSecs = 86400;
var currentSecs = initialSecs;

setTimeout(decrement,1000); 

function decrement() {
   var displayedSecs = currentSecs % 60;
   var displayedMin = Math.floor(currentSecs / 60) % 60;
   var displayedHrs = Math.floor(currentSecs / 60 /60);

    if(displayedMin <= 9) displayedMin = "0" + displayedMin;
    if(displayedSecs <= 9) displayedSecs = "0" + displayedSecs;
    currentSecs--;
    document.getElementById("timerText").innerHTML = displayedHrs + ":" + displayedMin + ":" + displayedSecs;
    if(currentSecs !== -1) setTimeout(decrement,1000);
}

0

// 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("Nov 13 2017 22:05: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>


0

내 솔루션은 MySQL 날짜 시간 형식으로 작동하며 콜백 기능을 제공합니다. 완전에. 면책 조항 : 이것은 내가 필요한 것이므로 분과 초 만 작동합니다.

jQuery.fn.countDownTimer = function(futureDate, callback){
    if(!futureDate){
        throw 'Invalid date!';
    }

    var currentTs = +new Date();
    var futureDateTs = +new Date(futureDate);

    if(futureDateTs <= currentTs){
        throw 'Invalid date!';
    }


    var diff = Math.round((futureDateTs - currentTs) / 1000);
    var that = this;

    (function countdownLoop(){
        // Get hours/minutes from timestamp
        var m = Math.floor(diff % 3600 / 60);
        var s = Math.floor(diff % 3600 % 60);
        var text = zeroPad(m, 2) + ':' + zeroPad(s, 2);

        $(that).text(text);

        if(diff <= 0){
            typeof callback === 'function' ? callback.call(that) : void(0);
            return;
        }

        diff--;
        setTimeout(countdownLoop, 1000);
    })();

    function zeroPad(num, places) {
      var zero = places - num.toString().length + 1;
      return Array(+(zero > 0 && zero)).join("0") + num;
    }
}

// $('.heading').countDownTimer('2018-04-02 16:00:59', function(){ // on complete})

0

성능 향상을 위해 setInterval / setTimeout 대신 requestAnimationFrame 을 사용 하여 빠른 루핑을 안전하게 수행 할 수 있습니다 .

setInterval / setTimeout을 사용할 때 루프 작업이 간격보다 시간이 더 걸리면 브라우저는 단순히 간격 루프를 확장하여 전체 렌더링을 계속합니다. 이것은 문제를 일으키고 있습니다. 몇 분 동안 setInterval / setTimeout 과부하가 발생하면 탭, 브라우저 또는 전체 컴퓨터가 정지 될 수 있습니다.

인터넷 장치는 다양한 성능을 제공하기 때문에 고정 간격 시간을 밀리 초 단위로 하드 코딩하는 것은 불가능합니다!

은 Using Date 객체를 시작 날짜 신기원와 현재를 비교. 이것은 다른 모든 것보다 훨씬 빠릅니다. 브라우저는 꾸준한 60FPS (1000 / 60 = 16.66ms 프레임 )- 눈 깜박임의 1/4로 모든 것을 처리합니다. 루프에서 작업이 더보다 요구되는 경우 - 브라우저에서 일부 다시 그리기가 삭제됩니다.

이를 통해 눈이 인식되기 전에 여백을 허용합니다 ( 인간 = 24FPS => 1000/24 ​​= 41.66ms (프레임 별 = 유체 애니메이션)!)

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>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.