部署至Netlify后Flip Clock倒计时插件无法正常工作

本地使用jQuery的FlipClock插件实现倒计时功能一切正常，但部署到Netlify后，其他功能均可正常使用，唯独倒计时失效。相关代码如下：

Index.html代码 #

<!-- Countdown attachments-->
<link rel="stylesheet" href="Assets/flipclock.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="Assets/flipclock.min.js"></script>
<!-- ------ -->

<div class="clock"></div>

<script>
    var clock;

    $(document).ready(function () {
        // Grab the current date
        var currentDate = new Date();
        // Set some date in the future. In this case, it's always Jan 1
        var futureDate = new Date(currentDate.getFullYear() + 1, 0); /* yyyy,mm,dd formate*/
        // Calculate the difference in seconds between the future and current date
        var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
        // Instantiate a coutdown FlipClock
        clock = $('.clock').FlipClock(diff, {
            clockFace: 'DailyCounter',
            countdown: true
        });
    });
</script>

显示效果说明 #

• 当前显示效果：仅呈现空白的.clock容器，无倒计时时钟组件渲染
• 预期显示效果：显示带有翻转动画的日、时、分、秒倒计时组件

排查及解决方案 #

1. 修正资源路径大小写 #

Netlify服务器区分文件大小写，而本地Windows环境默认不区分。请检查：

• 确认Assets文件夹实际名称与代码引用一致（比如是否为小写assets）
• 确保flipclock.css、flipclock.min.js的文件名大小写与代码中的引用完全匹配

2. 修复jQuery协议兼容问题 #

代码中jQuery使用http协议，Netlify站点默认使用https，浏览器会阻止混合内容加载，修改为HTTPS或相对协议：

<!-- HTTPS协议 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- 或相对协议 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

3. 调整初始化时机 #

将初始化代码切换到window.onload，确保所有资源加载完成后再初始化：

var clock;
window.onload = function () {
    var currentDate = new Date();
    var futureDate = new Date(currentDate.getFullYear() + 1, 0);
    var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
    clock = $('.clock').FlipClock(diff, {
        clockFace: 'DailyCounter',
        countdown: true
    });
};

4. 检查Netlify部署日志 #

登录Netlify后台查看部署日志，确认Assets文件夹下的资源是否被正确部署，是否存在404错误。若资源未上传，检查.gitignore文件是否排除了该文件夹。

内容的提问来源于stack exchange，提问作者Mehedi Hasan