如何将jQuery倒计时附加到代码中并使其工作
How to attach jQuery countdown to code and make it work?
我是web开发的新手,所以请原谅我的不足。
我已经为一个项目在网站上工作了一段时间,现在我必须在上面添加一个特定的倒计时(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
分区。
padZeros
现在是padZeroes
。我插入了倒计时即将到来的年份、月份和日期的变量名。通过使用适当的选项调用$("#yourDivId").countdown()
,可以连接到目标<div>
。
$(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>
根据文档:
<script>
$(function() {
var mydate = new Date();
mydate = new Date(mydate .getFullYear() + 1, 11 - 1, 6);
$('#countdown').countdown({until: mydate });
]);
</script>
在关闭</body>
标签之前添加此代码。
相关文章:
- 为什么我需要在setTimeout中有匿名函数才能使此代码工作
- ajax代码工作时,使用javascript禁用html中的链接
- Javascript 新手到忍者无法让书籍代码工作
- 设计代码工作流程
- 在 Java 脚本中使用追加时 HTML 标记不起作用,但在执行硬编码时 html 代码工作正常
- 如何使以下 JavaScript 代码工作并生成 ID 为 “myDivId” 的元素内的名称和年龄列表:
- 函数停止代码工作
- 如何使替换代码工作
- 我无法让这个高图表代码工作,有谁知道为什么它不起作用
- 代码工作 jsfiddle 不适用于 dreamweaver
- jQuery Keyup 不能从代码工作,而是从 Chrome.console 工作
- Web服务器代码工作不正常
- 求和代码工作不正常
- 启用JS评测时,JavaScript代码工作得更快?什么
- 为什么获胜't这个极其简单的Javascript代码工作
- 我的Javascript代码工作不正常
- js代码工作是JSfiddle,但不是在我的浏览器
- 我有反应标签代码工作完美,但我需要改变html结构
- JQuery登录如果语句代码工作不正常则注销
- 我如何使这段代码工作自定义'Facebook Like Box'