代码之家 › 专栏 › 技术社区 › Jiga

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

jquery-plugins jquery

Jiga · 技术社区 · 7 年前

我想知道如何从这里用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>

1 回复 | 直到 7 年前

EhsanT 7 年前

如果你只想显示2小时的倒计时,那么你必须得到当前日期时间并将其加上2小时,然后设置倒计时。

通过此行,您可以获得客户的当前日期: var today = new Date();

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>

推荐文章

Ravindra Bhanderi · 如何在Laravel的CKEditor中上载图像,并在服务器端上载图像

6 年前

Hello Folks · jQuery可调整大小的插件游标损坏

6 年前

Vanjith · jQuery jqplot-如何创建标签的多行

6 年前

Joshua Paul Barnard · 使用append在jQuery插件中创建覆盖

7 年前

Abilash Erikson · 如何在前端拍摄包含用户上传图像的div的截图?

7 年前

Jiga · 如何使用jQuery插件制作一个小时倒计时计时器

7 年前

g5wx · 初始化后更新jQuery插件设置

7 年前

prabha · 直接在网站中打开和编辑csv文件

7 年前

John · 如何定义jQuery validate setDefaults

7 年前

Sandeep Maharjan · 如何在Jquery验证插件中使用ajaxUserCall函数

7 年前