jQuery倒计时显示没有输出

Question

利用jQuery参考实现这倒计时

代码：

<html>

<head>

    <meta charset="UTF-8">
    <title>Merry Christmas</title>
    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<body>


    <!-- countdown -->
    <div id="defaultCountdown"></div>
    <!-- countdown --> 

<link rel="stylesheet" type="text/css" href="css/jquery.countdown.css"> 
<script src="js/jquery.countdown.js" type="text/javascript"></script>
<script src="js/jquery.plugin.js" type="text/javascript"></script>

<script>
var newYear = new Date(); 
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1); 
$('#defaultCountdown').countdown({until: newYear}); 
</script>

</body>
</html>

它只显示空白页。没有控制台错误。

小提琴在下面可以看到。

https://jsfiddle.net/n4nmgkgc/1/

Answer 1

页面底部的脚本需要如下所示

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.plugin.js"></script>
<script src="jquery.countdown.js"></script>
<script>
$(function () {
    var newYear = new Date();
    newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
    $('#defaultCountdown').countdown({until: newYear});
});
</script>

就像@Tarafder所说的，jquery.countdown是jquery.plugin的依赖

Answer 2

jquery.countdown.js依赖于jquery.plugin.js.尝试更改这两个JS文件的加载顺序，如下所示。先加载"jquery.plugin.js“，然后加载"jquery.countdown.js”。

<script src="js/jquery.plugin.js" type="text/javascript"></script>
<script src="js/jquery.countdown.js" type="text/javascript"></script>

Answer 3

脚本中没有问题，只是加载的外部库/资源在http协议上，jsfiddle没有正常工作。

但是当您在浏览器上运行相同的脚本时，这不应该阻止您。

解决方案：

无论如何，作为一种解决办法，我已经将所有这些资源手动转储到jsfiddle上，并且您的count down脚本运行良好。

工作CountDown Timer @JSFiddle

此外，您还需要理解您为脚本加载的库的依赖性，因为在您的示例中，您的jquery.plugin.js依赖于jquery.js，而jquery.countdown.js依赖于jquery.plugin.js。

因此，下面是您需要加载外部库(从上到下)的顺序：

• jquery.js
• jquery.plugin.js
• jquery.countdown.js