倒数计时器目标日期隐藏输入字段javascript

时间:2015-10-30 05:12:00

标签: javascript jquery datetime

我的隐藏输入字段

 <input type="hidden" name="expire_date" value="2015-10-31 00:00:00">

我有这样的产品过期日期,我想从现在起倒数计时器

日期,小时,单独分钟<div> s

1 个答案:

答案 0 :(得分:2)

使用countdownTimer jquery库。我指导你如何做到这一点。首先下载jquery.countdownTimer.js和jquery.countdownTimer.css文件。

html应该如下。

<!-- link java script and css -->
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript" src="jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.countdownTimer.css" />

<input type="hidden" id="exp" name="expire_date" value="2015-10-31 00:00:00">
<div id="countdowntimer"><span id="future_date"><span></div>

Javascript应该类似于以下内容。

<script type="text/javascript">
$(function(){
    var expier= $("#exp").val();
    expier = expier.replace("-", "/");
    $("#future_date").countdowntimer({
        dateAndTime : expier,
    size : "lg",
        regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})",
            regexpReplaceWith: "$1<sup>days</sup> / $2<sup>hours</sup> / $3<sup>minutes</sup> / $4<sup>seconds</sup>"
    });
});
</script>

以下网址上有演示,您也可以从中下载所有必需的文件。 http://harshen.github.io/jquery-countdownTimer/