如何使用 jQuery 插件制作一个小时的倒数计时器
How to make a hour countdown timer with jQuery plugin
我想知道如何使用此处的 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>
如果您只想显示 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 插件制作倒数计时器 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>
如果您只想显示 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>