个人中心
gpt4 book ai didi

jquery - 新手使用jquery，倒计时小部件不起作用，有人可以帮忙吗？

转载 作者：行者123 更新时间：2023-12-01 06:05:19 26 4
gpt4 key购买 nike

我对此完全是新手，以前从未使用过 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;
}
<小时/>

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

非常感谢所有帮助。

谢谢

最佳答案

好的，我已经对插件和相关的 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 - 新手使用jquery，倒计时小部件不起作用，有人可以帮忙吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7098210/

26 4 0
文章推荐： java - 在Android上通过OkHttp连接到websocket时如何捕获UnknownHostException？
文章推荐： jquery - IE9 的 AppendText 和 TypeText 问题(特别是更改事件)
文章推荐： python - 配置文件中的cherrypy相对路径？
文章推荐： jquery - 将函数延迟过渡持续时间
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com