个人中心
gpt4 book ai didi

javascript - 如何将 jQuery 倒计时附加到代码并使其工作？

转载 作者：行者123 更新时间：2023-11-30 16:47:02 29 4
gpt4 key购买 nike

本人是网络开发新手，不足之处请见谅。

我已经在一个元素的网站上工作了一段时间，现在我必须在它上面添加一个特定的倒计时(Keith Wood Countdown)“用零填充:”一个。

问题是，我不知道如何将目标日期设置为倒计时以及如何将其附加到特定的 div。我在网上搜索过，在 stackoverflow 上也有类似的问题，但它们是针对这个倒计时的旧版本。对于如何将其附加到 div，无处可寻。

这是我的代码:

HTML:

<!DOCTYPE html>
 <html class="html">
<head>

    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>LMUN - Home</title>

    <meta name="description" content=" Welcome to La Martiniere Model United Nations 2015">
    <meta name="keywords" content="lmun,lucknow mun,la martiniere mun,la martiniere college,la martiniere model un,la martiniere model united nations,lmun 2015">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Slideshow *Starts* -->
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<script type="text/javascript" src="engine0/jquery.js"></script>
    <!-- Slideshow *Ends* -->
</head>

<body>

    <div class="brdr_top"></div> <!-- A little gold border at the top -->

    <div  class="header" id="banner"> 
            <img src="images/Website_bannertxtcombo.png" id="banner_txtcombo"/> <!-- The LMUN text image -->
            <img src="images/Logo_Blue_Small.png" id="banner_logo"/> <!-- The LMUN Logo -->
    </div>

    <div class="header" id="navbar"> <!-- The navigation bar and contents *begins* -->

        <div class="nb_item"><span id="space"></span>HOME<span id="space"></span></div>

        <div class="nb_item">ABOUT US <span id="dArrow"></span>
            <ul id="abtus_menu">
                <li class="nb_item_li"><a href="http://www.lamartinierelucknow.org/" target="_blank"><span id="space2"></span>LA MARTINIERE COLLEGE</a></li>
                <li class="nb_item_li"><span id="space2"></span>LMUN 2015</li>
                <li class="nb_item_li"><span id="space2"></span>SECRETARIAT</li>
            </ul>
        </div>

    <div class="nb_item"><span id="space"></span>REGISTER <span id="dArrow"></span>
        <ul id="rgstr_menu">
            <li class="nb_item_li"><span id="space2"></span>INDIVIDUAL</li>
            <li class="nb_item_li"><span id="space2"></span>DELEGATION</li> 
        </ul>
    </div>

    <div class="nb_item"><span id="space"></span>COMMITTEES <span id="dArrow"></span>
        <ul id="comt_menu">
            <li class="nb_item_li"><span id="space2"></span>African Union</li>
            <li class="nb_item_li"><span id="space2"></span>Arab League</li>
            <li class="nb_item_li"><span id="space2"></span>SPECPOL</li>
            <li class="nb_item_li"><span id="space2"></span>CCPCJ</li>
            <li class="nb_item_li"><span id="space2"></span>UNSC</li>
            <li class="nb_item_li"><span id="space2"></span>Ad - Hoc</li>
        </ul>
    </div>

    <div class="nb_item"><span id="space"></span>RESOURCES <span id="space"></span></div>

    <div class="nb_item">EVENTS <span id="dArrow"></span>
        <ul id="evnt_menu">
            <li class="nb_item_li"><span id="space2"></span>KEYNOTE SPEAKERS</li>
            <li class="nb_item_li"><span id="space2"></span>SOCIALS</li>
        </ul>
    </div>

    <div class="nb_item"><span id="space"></span>SPONSORS</div>

    <div class="nb_item"><span id="space"></span>CONTACT US<span id="space"></span></div>
 </div>
<div id="slideshow">
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your             page -->
<div id="wowslider-container0">
<div class="ws_images"><ul>
    <li><img src="data0/images/ff.jpg" alt="" title="" id="wows0_0"/></li>
    <li><a href="http://wowslider.com"><img src="data0/images/dsc_0160001.jpg" alt="jquery content slider" title="" id="wows0_1"/></a></li>
    <li><img src="data0/images/la_martiniere_college_building,_lucknow.jpg" alt="" title="" id="wows0_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
    <a href="#" title=""><span><img src="data0/tooltips/ff.jpg" alt=""/>1</span></a>
    <a href="#" title=""><span><img src="data0/tooltips/dsc_0160001.jpg" alt=""/>2</span></a>
    <a href="#" title=""><span><img src="data0/tooltips/la_martiniere_college_building,_lucknow.jpg" alt=""/>3</span></a>
</div></div><div class="ws_script" style="position:absolute;left:-99%"><a      href="http://wowslider.com">image carousel</a> by WOWSlider.com v8.2</div>
<div class="ws_shadow"></div>
</div>  
<script type="text/javascript" src="engine0/wowslider.js"></script>
<script type="text/javascript" src="engine0/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>

<div id="countdown"></div>
 </body>
 </html>

我想将倒计时添加到 countdown div。

最佳答案

padZeros现在是padZeroes .我已经为倒计时临近的年、月和日插入了变量名。您附加到目标 <div>调用$("#yourDivId").countdown()使用适当的选项。 

$(function() {
  var date = new Date();
  var numYears = 0;
  var month = 6;
  var day = 28;
  date = new Date(date.getFullYear() + numYears, month - 1, day);
  $('#defaultCountdown').countdown({
    until: date,
    padZeroes: true
  });
  $('#year').text(date.toLocaleDateString());
});
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>jQuery Countdown</title>
  <link rel="stylesheet" href="http://keith-wood.name/css/jquery.countdown.css">
  <style type="text/css">
    body > iframe {
      display: none;
    }
    #defaultCountdown {
      width: 240px;
      height: 45px;
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="http://keith-wood.name/js/jquery.plugin.js"></script>
  <script src="http://keith-wood.name/js/jquery.countdown.js"></script>
</head>
<script>
  $(function() {
    var date = new Date();
    var numYears = 0;
    var month = 6;
    var day = 28;
    date = new Date(date.getFullYear() + numYears, month - 1, day);
    $('#defaultCountdown').countdown({
      until: date,
      padZeroes: true
    });
    $('#year').text(date.toLocaleDateString());
  });
</script>

<body>
  <h1>jQuery Countdown Basics</h1>
  Counting down to:
  <div id="year"></div>
  <div id="defaultCountdown"></div>
</body>

</html>

关于javascript - 如何将 jQuery 倒计时附加到代码并使其工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31079260/

29 4 0
文章推荐： 创建一个包含 100 个节点的链表，每个节点包含一个随机数 C
文章推荐： javascript - 你能根据最小宽度将网站缩放 +200% 吗？
文章推荐： javascript - 如何使用具有唯一类名的 jquery 定位链接？
文章推荐： javascript - 只选择两个复选框
行者123
个人简介

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

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