使用WooCommerce get_date_on_sale_to()实现JS倒计时器报错修复

嘿，我来帮你搞定这个倒计时器的问题！你遇到的NaN d NaN h NaN m NaN s错误，核心原因很明确，咱们一步步解决：

问题根源 #

你当前的代码里，这一行存在关键语法错误：

var countDownDate = new Date(<?php echo $product->get_date_on_sale_to(); ?>).getTime();

PHP输出的日期是"2018-01-25T00:00:00-01:00"，但直接裸写进JS后，会变成：

new Date(2018-01-25T00:00:00-01:00)

JS会把这个当成数学表达式来计算，而不是日期字符串，自然无法生成有效的Date对象，getTime()就会返回NaN，导致后续所有计算都变成NaN。

修复方案 #

方案1：给日期字符串添加引号（最简单的修复） #

只需要给PHP输出的内容加上双引号，让它成为JS的合法字符串参数：

var countDownDate = new Date("<?php echo $product->get_date_on_sale_to(); ?>").getTime();

这样JS就能正确识别这是一个ISO格式的日期字符串，生成有效的Date对象。

方案2：直接传递时间戳（兼容性更好） #

如果你的网站需要兼容旧浏览器（比如IE11及更早），这些浏览器对带时区偏移的ISO日期解析支持不好，推荐用PHP把日期转换成Unix时间戳，再传给JS：

<?php 
// 将促销结束日期转成Unix时间戳（秒），乘以1000转换成JS需要的毫秒时间戳
$sale_end_timestamp = strtotime($product->get_date_on_sale_to()) * 1000;
?>
<script>
var countDownDate = <?php echo $sale_end_timestamp; ?>;
var x = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
    
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

这种方式跳过了JS的日期解析步骤，直接用时间戳计算，兼容性和可靠性都更强。

额外优化：避免空值报错 #

如果产品没有设置促销结束日期，get_date_on_sale_to()会返回空值，可能导致JS报错。可以先判断是否有促销日期再渲染代码：

<?php if ($sale_end_date = $product->get_date_on_sale_to()) : ?>
<script>
var countDownDate = <?php echo strtotime($sale_end_date) * 1000; ?>;
// 倒计时逻辑...
</script>
<?php endif; ?>

内容的提问来源于stack exchange，提问作者Esmaeil Badri