[JQUERY] 간단한 자바 스크립트 카운트 다운 타이머 코드?
JQUERY간단한 자바 스크립트 카운트 다운 타이머 코드?
해결법
-
1.
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>당신이 원하는 곳에 초 표시합니다. 그것은 다음과 같습니다 그래서 그런 다음, 타이머 () 함수에서 다음 줄을 삽입 :
function timer() { count=count-1; if (count <= 0) { clearInterval(counter); return; } document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling } -
2.나는 몇 시간 전에이 스크립트를 썼다 :
나는 몇 시간 전에이 스크립트를 썼다 :
용법:
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); }; } -
3.지금까지 답변을 즉시 실행되는 코드에 의존하는 것 같다. 당신은 1000MS에 대한 타이머를 설정하면, 실제로 대신 약 1,008 될 것입니다.
지금까지 답변을 즉시 실행되는 코드에 의존하는 것 같다. 당신은 1000MS에 대한 타이머를 설정하면, 실제로 대신 약 1,008 될 것입니다.
여기 당신이 그것을 할 방법입니다 :
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!"); } ); -
4.여기에 사람이 분, 초를 필요로하는 경우 또 다른 하나는 다음과 같습니다
여기에 사람이 분, 초를 필요로하는 경우 또 다른 하나는 다음과 같습니다
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); } -
5.// 자바 스크립트 카운트 다운 // 버전 1.01 6/7/07 (2000년 1월 20일) // TDavid에 의해 http://www.tdscripts.com/에서 VAR는 이제 새로운 날짜 () =; var에 theevent 새로운 날짜 = ( "2007년 9월 29일 0시 0분 1초"); VAR 초 = (theevent - 현재) / 1000; VAR 분 = 초 / 60; VAR 시간 = 분 / 60; VAR 일 = 시간 / 24; ID = window.setTimeout ( "업데이트 ();", 1000); 업데이트 함수 () { 이제 새로운 날짜 () =; 초 = (theevent - 이제) / 1000; 초 = Math.round (초); 분 = 초 / 60; 분 = Math.round (분); 시간 = 분 / 60; 시간 = Math.round (시간); 일 = 시간 / 24; 일 = Math.round (일); document.form1.days.value = 일; document.form1.hours.value = 시간; document.form1.minutes.value = 분; document.form1.seconds.value = 초; ID = window.setTimeout ( "업데이트 ();", 1000); }
<글꼴 얼굴 = "굴림"크기 = "3"> 12:00 카운트 다운 월 (31), 2000,
-
6.그냥 ClickUpvote의 대답 @ 수정 :
그냥 ClickUpvote의 대답 @ 수정 :
당신은 조금 더 쉽게 그것을 만들 인생 (즉시 호출 기능 식) 및 재귀를 사용할 수 있습니다 :
var i = 5; //set the countdown (function timer(){ if (--i < 0) return; setTimeout(function(){ console.log(i + ' secs'); //do stuff here timer(); }, 1000); })();난 5 = VAR; (기능 타이머 () { (--i <0) 돌아 가면; 에서는 setTimeout (함수 () { document.getElementsByTagName ( 'H1') [0] = 1 + .innerHTML '초'; 시간제 노동자(); } 1000); }) ();
5 초
-
7.허용 대답에 확장, 컴퓨터는 작동 타이머를 지연시킬 수 등, 수면에 가고. 당신은 작은 처리의 비용으로, 진정한 시간을 얻을 수 있습니다. 이것은 왼쪽 진정한 시간을 제공 할 것입니다.
허용 대답에 확장, 컴퓨터는 작동 타이머를 지연시킬 수 등, 수면에 가고. 당신은 작은 처리의 비용으로, 진정한 시간을 얻을 수 있습니다. 이것은 왼쪽 진정한 시간을 제공 할 것입니다.
<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> -
8.순수 JS와 함께 다음과 같이 할 수 있습니다. 당신은 초 단위로 기능을 제공해야하며 나머지를 할 것입니다.
순수 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 = countDownFrom = N => (displayTime (N)의 setTimeout (_ => N = SID countDownFrom (- N) : displayTime (N), 1000)), SID; countDownFrom (3610); 에서는 setTimeout (_ => 사항 clearTimeout (SID), 20005);
9.@Layton 에버 슨 I가 제시 한 솔루션을 바탕으로 시간, 분, 초를 포함하는 카운터를 개발 :
@Layton 에버 슨 I가 제시 한 솔루션을 바탕으로 시간, 분, 초를 포함하는 카운터를 개발 :
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); }10.// 자바 스크립트 카운트 다운 // 버전 1.01 6/7/07 (2000년 1월 20일) // TDavid에 의해 http://www.tdscripts.com/에서 VAR는 이제 새로운 날짜 () =; var에 theevent 새로운 날짜 = ( "2017년 11월 13일 22시 5분 1초"); VAR 초 = (theevent - 현재) / 1000; VAR 분 = 초 / 60; VAR 시간 = 분 / 60; VAR 일 = 시간 / 24; ID = window.setTimeout ( "업데이트 ();", 1000); 업데이트 함수 () { 이제 새로운 날짜 () =; 초 = (theevent - 이제) / 1000; 초 = Math.round (초); 분 = 초 / 60; 분 = Math.round (분); 시간 = 분 / 60; 시간 = Math.round (시간); 일 = 시간 / 24; 일 = Math.round (일); document.form1.days.value = 일; document.form1.hours.value = 시간; document.form1.minutes.value = 분; document.form1.seconds.value = 초; ID = window.setTimeout ( "업데이트 ();", 1000); }
<글꼴 얼굴 = "굴림"크기 = "3"> 12:00 카운트 다운 월 (31), 2000,
11.내 솔루션은 MySQL의 날짜 시간 형식으로 작동하고 콜백 기능을 제공합니다. 완료합니다. 면책 조항 :이 내가 필요한 것입니다으로 만 분, 초와 함께 작동합니다.
내 솔루션은 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})12.공연을 위해, 우리는 이제 안전하게 빠른 대신하여 setInterval /에서는 setTimeout의 반복에 대한 requestAnimationFrame을 사용할 수 있습니다.
공연을 위해, 우리는 이제 안전하게 빠른 대신하여 setInterval /에서는 setTimeout의 반복에 대한 requestAnimationFrame을 사용할 수 있습니다.
setInterval을 /에서는 setTimeout을 사용하는 경우 루프 작업이 간격보다 더 많은 시간이 소요되는 경우, 브라우저는 단순히 전체 렌더링을 계속, 간격 루프를 확장합니다. 이 문제를 만드는 것입니다. setInterval을 /의 setTimeout 과부하 분 후,이 탭 브라우저 또는 전체 컴퓨터를 고정 할 수 있습니다.
인터넷 장치는 공연의 넓은 범위를 가지고, 그래서 밀리 초 단위로 고정 된 시간 간격을 하드 코딩하는 것은 매우 불가능하다!
시작 날짜 신기원와 현재를 비교, 날짜 개체를 사용. 루프에서 작업이 더보다 요구되는 경우에, 브라우저가 눈 blink-의 (60분의 1,000 = 16.66ms 프레임에 의해) 지속적으로 60 FPS에서 -a 분기에 모든 것을 돌볼 것입니다 빨리 다른 모든 것들보다 훨씬이며, 브라우저는 약간의 페인트 다시 떨어질 것이다.
이것은 눈앞 마진 몰래 허용된다 (24fps로 인간 = => 프레임별로 24분의 1,000 = 41.66ms = 유체 애니메이션!)
https://caniuse.com/#search=requestAnimationFrame
/ * (STRING) 초 HH : MM : SS.MS ------------------------ * / / *이 시간 형식은 ------------ * / FFMPEG와 호환 함수 secToTimer (SEC) { CONST O = 새로운 일 (0), P가 새로운 날짜 = (초 * 1000) .. (p.getTime () - o.getTime ()) 새로운 날짜를 반환합니다. toString () 분할 ( "") [4] + "" + p.getMilliseconds () } / * 루프 카운트 ---------------------------------------- * / 작업, 원산지 = 새로운 날짜 ()를 할 수 있습니다. 다음 getTime () CONST 타이머 = () => { 작업 = requestAnimationFrame (타이머) OUT.textContent = secToTimer ((새 Date () 다음 getTime () -. 원점) / 1000) } / * 시작 ----------------------------------------- * / 루핑 requestAnimationFrame (타이머) / * 정지 ------------------------------------------ * / 루핑 // cancelAnimationFrame (일) / * 시작 날짜를 재설정 ---------------------------------- * / // 출처 = 새 Date (). getTime를 () 스팬 {폰트 크기 : 4rem} <스팬 ID = "OUT"> 로
<버튼의 onclick = "원산지 = 새로운 날짜 (). 다음 getTime ()"> RESET <버튼의 onclick = "requestAnimationFrame (타이머)"> RESTART <버튼의 onclick = "cancelAnimationFrame (직업)"> STOPfrom https://stackoverflow.com/questions/1191865/code-for-a-simple-javascript-countdown-timer by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] 어떻게 자바 스크립트에서 비동기 기능을 만들 수 있습니까? (0) 2020.10.08 [JQUERY] 혜성과 jQuery를 [폐쇄] (0) 2020.10.07 [JQUERY] JQuery와 변화 클래스 이름 (0) 2020.10.07 [JQUERY] 보다 큼 /보다 적게보다는위한 스위치 문 (0) 2020.10.07 [JQUERY] '.ready $ (문서) ()'의 비 jQuery를 상응하는 무엇입니까? (0) 2020.10.07