Question

尝试使用this引用

实现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

jquery.countdown.js 依赖 jquery.plugin.js 。尝试更改这两个JS文件的加载顺序，如下所示。加载＆＃34; jquery.plugin.js＆＃34;首先，然后加载＆＃34; jquery.countdown.js＆＃34;。

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

Answer 2

您的脚本中没有任何问题，只是您加载的http协议的外部库/资源jsfiddle因其被阻止而无法正常工作。

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

解决方法：

无论如何，作为一种解决方法，我已在jsfiddle上手动转储所有这些资源，并且您的count down脚本运行正常。

Working CountDown Timer @JSFiddle

此外，您需要了解加载脚本的库的依赖性，因为在您的情况下，jquery.plugin.js依赖于jquery.js而jquery.countdown.js依赖于{{1} }。

以下是您需要加载外部库的顺序（从上到下）：

的jquery.js

jquery.plugin.js

jquery.countdown.js

Answer 3

您页面底部的脚本需要像这样

<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一样，Ashek E Elahi说，jquery.countdown是jquery.plugin的依赖

Answer 4

你忘了添加风格请加上

头部

 <style type="text/css">
            #defaultCountdown { width: 240px; height: 45px; }
        </style>

并刷新页面..时钟将显示在页面中..快速尝试

jQuery倒计时显示没有输出

4 个答案: