html页面多个计时器,JS/jquery实现一个网页内同时调用多个倒计时的方法

该文章介绍了一种使用jQuery实现网页上同时运行多个倒计时的方法。通过定义和调用特定的函数,可以为每个倒计时设置独立的时间戳,并在页面上更新小时、分钟和秒数。
摘要由CSDN通过智能技术生成

本文实例讲述了jquery/js实现一个网页内同时调用多个倒计时的方法。分享给大家供大家参考,具体如下:

最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦!

2017427114739217.png?2017327114811

',//统一开始时间戳

intervalTime:function(){

if(plugJs.stamp > 0){

var day = Math.floor(plugJs.stamp / (60 * 60 * 24));

var hour = Math.floor(plugJs.stamp / (60 * 60)) - (day * 24);

var minute = Math.floor(plugJs.stamp / 60) - (day * 24 * 60) - (hour * 60);

var second = Math.floor(plugJs.stamp) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);

if (day <= 9) day = '0' + day;

if (hour <= 9) hour = '0' + hour;

if (minute <= 9) minute = '0' + minute;

if (se

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的示例,实现的是一个倒计时器,时长为两个小时,每秒钟更新一次。 HTML 代码: ```html <div id="countdown"></div> ``` JavaScript 代码: ```javascript // 获取显示倒计时的元素 var countdownElement = document.getElementById('countdown'); // 设置倒计时的时长,单位为秒 var duration = 2 * 60 * 60; // 定义一个函数,用于更新倒计时的显示 function updateCountdown() { // 计算剩余的小时数、分钟数和秒数 var hours = Math.floor(duration / 3600); var minutes = Math.floor((duration % 3600) / 60); var seconds = duration % 60; // 格式化显示字符串 var displayString = ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2); // 更新显示 countdownElement.textContent = displayString; // 减少剩余时间 duration--; // 如果倒计时结束,清除定时器 if (duration < 0) { clearInterval(intervalId); countdownElement.textContent = '倒计时结束'; } } // 初始化倒计时显示 updateCountdown(); // 每秒钟更新一次倒计时 var intervalId = setInterval(updateCountdown, 1000); ``` 在上面的代码中,我们首先获取了一个用于显示倒计时的元素,然后设置了倒计时的时长,单位为秒。接着,我们定义了一个名为 `updateCountdown` 的函数,用于更新倒计时的显示。在这个函数中,我们首先计算了剩余的小时数、分钟数和秒数,然后格式化显示字符串,并更新了倒计时的显示。最后,我们减少了剩余时间,并检查倒计时是否结束,如果结束,则清除定时器,并显示倒计时结束的消息。 在初始化倒计时显示后,我们使用 `setInterval` 方法每秒钟调用一次 `updateCountdown` 函数,实现倒计时的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值