Question

我想知道如何使用jQuery插件制作一个倒数计时器http://hilios.github.io/jQuery.countdown/

我需要一个2小时的倒数计时器。这是我目前的代码：

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.css">
</head>

<body>
    <p>hi</p>
    <div id="getting-started"></div>

    <script type="text/javascript">
    $('#getting-started').countdown('2020/10/10', function(event) {
        $(this).html(event.strftime('%D days %H:%M:%S'));
    });
    </script>
</body>
</html>

Answer 1

如果您只想显示2小时倒计时，则必须获取当前日期时间并将其加2小时，然后设置倒计时。

使用此行，您可以获取客户的当前日期： var today = new Date();

然后使用此行，您可以创建一个包含所需新日期的新变量（对于您接下来的2小时）：

var newDate = today.setHours(today.getHours() + 2)

最后，您可以使用新创建的日期变量'2020/10/10'

替换代码中的newDate

您的代码稍有改动就像这样：

var param = 2; // Change this if you want more or les than 2 hours

var today = new Date();
var newDate = today.setHours(today.getHours() + param);

$('#getting-started').countdown(newDate, function(event) {
  $(this).html(event.strftime('%H:%M:%S'));
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>

<p>hi</p>
<div id="getting-started"></div>

如何使用jQuery插件制作小时倒数计时器

1 个答案: