jQuery时间插件jquery.clock.js用法实例(5个示例)

当用户需要在网页中显示时间时，可以使用jQuery时间插件jquery.clock.js。 下面是关于该插件的完整攻略和5个示例。

1. 下载和引入jquery.clock.js

首先，需要从官方网站下载jquery.clock.js。然后在你的HTML页面中引入jquery和jquery.clock.js：

<script src="jquery-3.5.1.min.js"></script>
<script src="jquery.clock.js"></script>

2. 显示当前时间

可以通过下面的代码在页面中显示当前时间：

<div id="clock"></div>

<script>
    $(function () {
        $('#clock').clock();
    });
</script>

这里使用了clock()函数，并绑定到一个id为clock的HTML标签上。该函数会自动更新当前时间。

3. 使用自定义日期时间格式

可以使用format参数来显示自定义的日期时间格式。例如，要按照年-月-日 时:分:秒的格式显示当前时间：

<div id="clock"></div>

<script>
    $(function () {
        $('#clock').clock({
            format: 'yyyy年MM月dd日 HH:mm:ss'
        });
    });
</script>

4. 显示倒计时

使用jquery.clock.js还可以显示倒计时。例如，要在页面中显示一个从当前时间到指定日期的倒计时，可以使用下面的代码：

<div id="countdown"></div>

<script>
    $(function () {
        $('#countdown').countdown(new Date('December 31, 2021 23:59:59'));
    });
</script>

该代码会在页面上显示一个类似于"1天23小时59分钟59秒"的倒计时。

5. 自定义倒计时格式

还可以使用format参数来自定义倒计时的格式。例如，要按照"天-小时-分钟-秒"的格式显示倒计时：

<div id="countdown"></div>

<script>
    $(function () {
        $('#countdown').countdown({
            date: new Date('December 31, 2021 23:59:59'),
            format: 'd天 h小时 m分钟 s秒'
        });
    });
</script>

6. 倒计时结束后的回调函数

在倒计时结束后，可以执行一些自定义的动作。例如，在页面上显示"倒计时结束"的消息：

<div id="countdown"></div>

<script>
    $(function () {
        $('#countdown').countdown({
            date: new Date('December 31, 2021 23:59:59'),
            format: 'd天 h小时 m分钟 s秒',
            onFinish: function () {
                $(this).text('倒计时结束');
            }
        });
    });
</script>

在倒计时结束后，jQuery.clock.js会执行回调函数onFinish。在该示例中，回调函数会把countdown标签中的文本修改为"倒计时结束"。

至此，就完成了jquery.clock.js的使用说明，以上示例也能帮你理解其使用方式和注意事项。