moment.js 및 moment-duration-format 플러그인을 사용하여 jQuery 카운트 다운 타이머를 만들었습니다 .
주 $('div#countdown')함수 내에서 하드 코딩된다. 기능은 여기에 제시된대로 작동합니다. 그러나 하드 코딩 된 참조를 $ (this)로 변경하면 작동하지 않습니다. console.log($this)빈 개체를 반환합니다.
간격이 범위 문제를 일으키는 경우를 대비하여 함수 시작 부분에 $ (this)를 변수로 설정하려고 시도했지만 아무런 차이가 없었습니다.
혼란스러운 부분은 $.fn.xxx = function사용자 지정 jQuery 함수에 대해 이전 에이 정확한 구문을 사용 했으며 $ (this)가 해당 함수에서 잘 작동 했다는 것 입니다. 이 특정 기능에 대한 무언가가 그것을 트립하고 있습니다.
<script>
$.fn.countdown = function ( seconds, tFormat, stopAtZero ) {
tFormat = (typeof tFormat !== 'undefined') ? tFormat : 'hh:mm:ss';
stopAtZero = (typeof stopAtZero !== 'undefined') ? stopAtZero : true;
var eventTime = Date.now() + ( seconds * 1000 );
var diffTime = eventTime - Date.now();
var duration = moment.duration( diffTime, 'milliseconds' );
var interval = 0;
var counter = setInterval(function () {
$('div#countdown').text( moment.duration( duration.asSeconds() - ++interval, 'seconds' ).format( tFormat, { trim: false }) );
if( stopAtZero && interval >= seconds ) clearInterval( counter );
}, 1000);
};
$('div#countdown').countdown( 30*60, 'mm:ss' );
</script>
<div id="countdown"></div>
편집 : 해결. 기능은 괜찮 았습니다. Div 이후 (또는 Document Load 이후) :: headdesk ::
문제는 setTimeout()내부 함수가 외부 함수와 다른 범위 에서 실행 되기 때문 입니다. 따라서 this당신이 기대하는 것이 아닙니다. this참조 를 캐시해야합니다 .
또한 옵션이 포함 된 함수에 객체를 제공하여 로직을 약간 개선 할 수 있습니다. 그런 다음을 사용 $.extend하여 기본값을 제공 할 수 있습니다 . 또한 this사용자가 플러그인을 초기화 할 개체 컬렉션을 제공 할 수 있도록 반복해야합니다 . 이 시도:
$.fn.countdown = function(options) {
var defaults = {
seconds: 0,
tFormat: 'hh:mm:ss',
stopAtZero: true,
complete: function() {}
};
var settings = $.extend(defaults, options);
$(this).each(function() {
var $el = $(this);
var eventTime = Date.now() + (settings.seconds * 1000);
var diffTime = eventTime - Date.now();
var duration = moment.duration(diffTime, 'milliseconds');
var interval = 0;
var counter = setInterval(function() {
$el.text(moment.duration(duration.asSeconds() - ++interval, 'seconds').format(settings.tFormat, {
trim: false
}));
if (settings.stopAtZero && interval >= settings.seconds) {
clearInterval(counter);
settings.complete();
}
}, 1000);
});
}
$('div').countdown({
seconds: 10,
complete: function() {
console.log('finished!');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>
<div></div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다