Question

我是一个完整的新手，之前从未使用过jquery，想为我的网站创建一个使用分区和跨度的倒计时小部件，但似乎无法让计数器出现。

将显示跨度，页面为空白。我想知道我的脚本是否错误，或者我是否需要配置我错过的内容？

以下是相关的网页代码：

____________________


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Your Title Here </title>
<meta name="Generator" content="Alleycode HTML Editor">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">

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





</head>

<body>


<div id="cntdwn_wrapper">

<div id="cntdwn_left">

<div id="counter">

<div id="defaultCountdown" class="hasCountdown">

<span class="countdown_row countdown_show4">

<span class="countdown_section"> 
<span class="countdown_amount"> </span>
</span>

<span class="countdown_section"> 
<span class="countdown_amount"> </span>
</span>

<span class="countdown_section"> 
<span class="countdown_amount"> </span>
</span>

<span class="countdown_section"> 
<span class="countdown_amount"> </span>
</span>

</span>

</div>

</div>

</div>

</div>

<div id="cntdwn_right">

<div id="cntdwn_date"><img src="images/events/numbersSmall.png" width="215" height="235"></div>

</div>

<script type="text/JavaScript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/JavaScript" src="js/jquery.countdown.js"></script>

<script type="text/JavaScript">


  $(function () {
    var counter = new Date();
    counter = new Date(2011, 11-1, 20, 10, 0, 0);
    $('#defaultCountdown').countdown({until: counter});

    $('#removeCountdown').toggle(function() {
      $(this).text('Re-attach');
      $('#defaultCountdown').countdown('destroy');
    },
    function() {
      $(this).text('Remove');
      $('#defaultCountdown').countdown({until: counter});
    });
  });


</script>

</body>
</html>

_________________________________

我的CSS样式表是这样编写的：

/* ----- 11. COUNTDOWN ---------------------------------------*/

#cntdwn_wrapper {
    width: 570px;
    height: 300px;
}

#cntdwn_left {
    float: left;
    width: 355px;
    height: 300px;
}

#chm_countdown_slider {
    width: 355px;
    height: 235px;
}

#counter {
    width: 355px;
    height: 65px;
    background: #333;
    background: url();
}

#cntdwn_right {
    float: left;
    width: 215px;
    height: 300px;
}

#cntdwn_date {
    width: 215px;
    height: 235px;
}

#chm_countdown_button {
    width: 215px;
    height: 65px;
}

a.chm_countdown_button_rollover {
    display: block;
    width: 215px;
    height: 65px;
    text-decoration: none;
    background: url();
}

a.chm_countdown_button_rollover:hover {
    background-position: 0 -65px;
}

.chm_countdown_button_displace {
    position: absolute;
    left: -5000px;
}

#defaultCountdown {
    float: right;
    width: 240px;
    height: 43px;
    margin: 9px 4px 0 0;
}

.hasCountdown {
    background-color: #333;
}

.countdown_rtl {
    direction: rtl;
}

.countdown_holding span {
    background-color: #333;
}

.countdown_row {
    clear: both;
    width: 100%;
    padding: 0px 2px;
    text-align: center;
}

.countdown_show1 .countdown_section {
    width: 98%;
}

.countdown_show2 .countdown_section {
    width: 48%;
}

.countdown_show3 .countdown_section {
    width: 32.5%;
}

.countdown_show4 .countdown_section {
    width: 24.5%;
}

.countdown_show5 .countdown_section {
    width: 19.5%;
}

.countdown_show6 .countdown_section {
    width: 16.25%;
}

.countdown_show7 .countdown_section {
    width: 14%;
}

.countdown_section {
    display: block;
    float: left;
    height: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 75%;
    color: #ccc;
    text-align: center;
    background-color: #ffffff;
}

.countdown_amount {
    font-weight: bold;
    font-size: 190%;
}

.countdown_descr {
    display: block;
    width: 100%;
}

.nivoSlider {
    position: relative;
}

.nivoSlider img {
    position: absolute;
    top: 0;
    left: 0;
}

/* If an image is wrapped in a link */

.nivoSlider a.nivo-imageLink {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 60;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

/* The slices in the Slider */

.nivo-slice {
    display: block;
    position: absolute;
    z-index: 50;
    height: 100%;
}

/* Caption styles */

.nivo-caption {
    position: absolute;
    z-index: 89;
    bottom: 0;
    left: 0;
    opacity: 0.8; /* Overridden by captionOpacity setting */
    width: 100%;
    background: #000;
    color: #fdfdfd;
}

.nivo-caption p {
    margin: 0;
    padding: 5px;
}

.nivo-caption a {
    display: inline !important;
}

.nivo-html-caption {
    display: none;
}

/* Direction nav styles (e.g. Next & Prev) */

.nivo-directionNav a {
    position: absolute;
    top: 45%;
    z-index: 99;
    cursor: pointer;
}

.nivo-prevNav {
    left: 0;
}

.nivo-nextNav {
    right: 0;
}

/* Control nav styles (e.g. 1,2,3...) */

.nivo-controlNav a {
    position: relative;
    z-index: 99;
    cursor: pointer;
}

.nivo-controlNav a.active {
    font-weight: bold;
}

/* -- */

.nivo-controlNav {
    position: absolute;
    right: 15px;
    bottom: 15px;
}

.nivo-controlNav a {
    display: block;
    float: left;
    /*width: 8px;*/
    /*height: 8px;*/
    margin-left: 4px;
    border: 0;
    background: #fdfdfd url(bullets.png) no-repeat;
    text-indent: -9999px;
}

.nivo-controlNav a.active {
    background-position: 0 -8px;
}


.nivo-directionNav a {
    display: block;
    /*width: 30px;*/
    /*height: 34px;*/
    border: 0;
    background: url(arrows.png) no-repeat;
    text-indent: -9999px;
}

a.nivo-nextNav {
    right: 15px;
    background-position: -30px 0;
}

a.nivo-prevNav {
    left: 15px;
}

.nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
    text-shadow: none;
}

.nivo-caption a { 
    color: #efe9d1;
    text-decoration: underline;
}

当我启动它时它不会显示计数器而且我有点困惑，因为当我与其他一些源代码进行比较时，它应该根据它们的页面工作......我错过了什么？

所有帮助非常感谢。

由于

Answer 1

好的，我已经对插件和相关的css文件做了一个小提琴。

http://jsfiddle.net/rlemon/kU55B/

您可以在这里查看，还有一个关于如何在您的页面上安装它的小描述。我包含对插件作者jquery.countdown.js和jquery.countdown.css文件的引用，以及google托管的jquery api 1.6.2

还要记得改变

var toDate = new Date(2011, 11-1, 20, 10, 0, 0);
$('#defaultCountdown').countdown({
    until: toDate
});

到

$(document).ready(function(){
  var toDate = new Date(2011, 11-1, 20, 10, 0, 0);
  $('#defaultCountdown').countdown({
      until: toDate
  });
});

当您将其放入页面时。

重新评估原始帖子后，我认为重要的是要注意您应该包含（如果可能）文档头部的所有脚本标记。将它们放在其他地方并没有错，但它是杂乱无章的。此外，执行代码时可能会发生冲突。

行$(document).ready...是确保页面上的所有HTML元素（或DOM元素）实际已加载并准备使用的行。

使用jquery完成新手，倒计时小部件将无法正常工作，有人可以帮忙吗？

1 个答案: