倒数计时脚本未开始倒数

Question

Can someone please tell me why the countdown function is not working properly (the countdown is not starting in the div with the ID "countdown"). 有人可以告诉我为什么倒计时功能无法正常运行（倒计时不是在ID为“ countdown”的div中开始）的。 Probably something real simple, but Javascript isn't my forte. 可能确实很简单，但是Java语言不是我的强项。 This is the countdown plugin I am using: http://keith-wood.name/countdown.html 这是我正在使用的倒计时插件： 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">&nbsp;</p>
    </div>
</form>
<div class="fnote justify">
</div>


    </div>
    <div id="footer">
    </div>
</div>


</body>
</html>

Answer 1

You should put the $(function () ...) script into the <head> tag of your HTML page. 您应该将$(function () ...)脚本放入HTML页面的<head>标记中。 This way, the countdown will be initiated once the DOM has fully loaded. 这样，一旦DOM完全加载，就会开始倒计时。

Answer 2

I think that the problem is that you are missing the reference to the "jQuery Countdown CSS". 我认为问题在于您缺少对“ jQuery Countdown CSS”的引用。 In the usage instructions of the plugin it says: 在插件的使用说明中说：

Download and include the jQuery Countdown CSS and JavaScript in the head section of your page. 在页面的顶部下载并包括jQuery Countdown CSS和JavaScript。 @import "jquery.countdown.css"; @import“ jquery.countdown.css”;

But you can still make it work without the "jQuery Countdown CSS" if you remove the class attribute from the <h4> element with the id "countdown", like this: 但是，如果您从id为“ countdown”的<h4>元素中删除class属性，则仍然可以在没有“ jQuery Countdown CSS”的情况下使其工作，如下所示：

<div class="time_box"> 
    <h3 class="italic">When The Clock Hits Zero ... </h3> 
    <h4 id="countdown">14min  20sec  </h4>  
</div>

JSFiddle Example 的jsfiddle例

Answer 3

The countdown plugin uses the class hasCountdown to test whether the countdown has already been instantiated, so you should use a different class name. 倒数计时插件使用hasCountdown类来测试倒计时是否已实例化，因此您应该使用其他类名。

From jquery.countdown.js: 从jquery.countdown.js：

/* Class name added to elements to indicate already configured with countdown.*/
markerClassName: 'hasCountdown'

倒数计时脚本未开始倒数

问题描述

3 个解决方案

解决方案1
0 2013-01-02 00:33:42

解决方案2
0 2013-01-02 01:25:46

解决方案3
0 2013-01-02 01:41:01

倒数计时脚本未开始倒数

问题描述

3 个解决方案

解决方案1 0 2013-01-02 00:33:42

解决方案2 0 2013-01-02 01:25:46

解决方案3 0 2013-01-02 01:41:01

解决方案1
0 2013-01-02 00:33:42

解决方案2
0 2013-01-02 01:25:46

解决方案3
0 2013-01-02 01:41:01