倒计时脚本没有开始倒计时
Countdown script not starting countdown
有人能告诉我为什么倒计时功能不能正常工作(倒计时不开始在div与id"倒计时")。可能是一些非常简单的东西,但是Javascript不是我的强项。这是我使用的倒计时插件:http://keith-wood.name/countdown.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="./css/web-style-second.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="chrome://mozbar/skin/css/injected.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
</head>
<body>
<a name="top"></a>
<div id="container">
<div id="content">
<div class="center">
<center>
<div></div>
</center>
</div>
<script type="text/javascript">
$(function() {
$('#countdown').countdown({
until: '14min+20sec',
format: 'MS',
layout: '{mnn}min ' + '{snn}sec ',
onExpiry: function() {
$(".hidden").css("display", "block");
}
});
});
</script>
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 class="hasCountdown" id="countdown">14min 20sec </h4>
</div>
<form name="signupFrm" id="signupFrm" action="#" method="post" class="hidden">
<div>
<div class="yellow_red">
<h1></h1>
</div>
<div class="center">
<a href="https://www.testing.com" class="btn_buy_now">
Get Started</a>
</div>
<input name="submit" value="submit" type="hidden">
<p class="mb_5"> </p>
</div>
</form>
<div class="fnote justify">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
您应该将$(function () ...)
脚本放入HTML页面的<head>
标记中。这样,倒计时将在DOM完全加载后启动。
我认为问题是你错过了"jQuery倒计时CSS"的参考。在插件的使用说明中说:
下载并包含jQuery倒计时CSS和JavaScript在页面的标题部分。@ import"jquery.countdown.css";
但是你仍然可以使它工作没有"jQuery倒计时CSS",如果你删除class
属性从<h4>
元素与id为"倒计时",像这样:
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 id="countdown">14min 20sec </h4>
</div>
倒计时插件使用hasCountdown
类来测试倒计时是否已经被实例化,所以你应该使用不同的类名。
/* Class name added to elements to indicate already configured with countdown.*/
markerClassName: 'hasCountdown'
相关文章:
- 从d:h:m:s开始的javascript倒计时
- 在运行jquery之前从5开始倒计时
- 如何制作两个倒计时计时器,如果一个开始,另一个会停止
- 如果我重新加载页面,倒计时将重新开始 - 如何设置修复
- 倒计时JavaScript与开始和结束
- 一个视图中的角度按钮在另一个视图中开始倒计时
- 如何使这个javascript函数实际收集服务器时间和倒计时,直到事件开始而不是浏览器/客户端时间
- 从 10 开始倒计时,并在计时器反应为 0 时重复
- 周期性倒计时计时器,每18小时一次,有特定的开始日期
- 如何在倒计时计数器中只在淡入淡出后调用游戏开始方法
- 如何制作一个Javascript计时器,数字从700000000开始,每1秒倒计时2.5
- 每8小时到达00:00:00时刷新页面并重新开始倒计时
- Javascript倒计时与开始/停止/重置和输入时间从用户
- 倒计时在凌晨3点,上午9点,下午3点和晚上9点重新开始
- 如何从数据库获得时间后开始倒计时
- 开始10秒倒计时当我点击下载按钮
- 在javascript中创建一个倒计时计时器,在1小时后开始倒计时
- 从开始日期和时间开始倒计时
- 按下按钮开始倒计时
- JS网站倒计时计时器从打开页面开始计数