NaN倒计时定时器javascript
NaN倒计时定时器javascript
提问于 2020-01-15 01:08:54
我已经为一个wordpress自定义插件创建了一个javascript倒计时。我读过this article，这是我第一次尝试做类似的事情。在我结束编写代码之后，我对它进行了测试，最初它工作得很好。现在，如果我尝试在console中记录小时、分钟、天和秒的值，我会得到一条NaN消息。我不知道出了什么问题，有人能帮我吗？
<?php if( get_option('show-countdown') ): ?>
<div class="countdown">
<h1 class="days d-inline"></h1>
<h1 class="hours d-inline"></h1>
<h1 class="minutes d-inline"></h1>
<h1 class="seconds d-inline"></h1>
</div>
<script>
(function($){
$(document).ready(function(){
var date = '<?php echo get_option('countdown-timer'); ?>';
console.log(date);
function remainingTime( date ){
var countdown = Date.parse(date) - Date.parse(new Date());
var seconds = Math.floor( (countdown/1000) % 60 );
var minutes = Math.floor( (countdown/1000/60) % 60 );
var hours = Math.floor( (countdown/(1000*60*60)) % 24 );
var days = Math.floor( countdown/(1000*60*60*24) );
return {
'total': countdown,
'd': days,
'h': hours,
'm': minutes,
's': seconds
};
}
console.log(remainingTime(date));
function initClock( endtime ){
var timeinterval = setInterval(function(){
var t = remainingTime( endtime );
$('.days').html(t.d);
$('.hours').html(t.h);
$('.minutes').html(t.m);
$('.seconds').html(t.s);
}, 1000);
}
initClock( '.countdown', date );
});
}(jQuery));
</script>
<?php endif; ?>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-15 01:23:33
问题是您向initClock传递了两个参数，但是方法签名只接受一个(endTime)。通过删除第一个参数，它看起来是一个未使用的CSS选择器字符串，问题就解决了：
(function($) {
$(document).ready(function() {
var date = '2030-01-01';
console.log(date);
function remainingTime(date) {
var countdown = Date.parse(date) - Date.parse(new Date());
var seconds = Math.floor((countdown / 1000) % 60);
var minutes = Math.floor((countdown / 1000 / 60) % 60);
var hours = Math.floor((countdown / (1000 * 60 * 60)) % 24);
var days = Math.floor(countdown / (1000 * 60 * 60 * 24));
return {
'total': countdown,
'd': days,
'h': hours,
'm': minutes,
's': seconds
};
}
console.log(remainingTime(date));
function initClock(endtime) {
var timeinterval = setInterval(function() {
var t = remainingTime(endtime);
$('.days').html(t.d);
$('.hours').html(t.h);
$('.minutes').html(t.m);
$('.seconds').html(t.s);
}, 1000);
}
initClock(date);
});
}(jQuery));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="countdown">
<h1 class="days d-inline"></h1>
<h1 class="hours d-inline"></h1>
<h1 class="minutes d-inline"></h1>
<h1 class="seconds d-inline"></h1>
</div>
注意:因为这主要是关于JavaScript的，所以我删除了PHP条件，并在get_option调用的位置硬编码了一个日期值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59738619
复制相关文章
相似问题
腾讯云开发者
