源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[JavaScript] jquery实现倒计时功能

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2018-12-25 05:04:59 | 显示全部楼层 |阅读模式
这篇文章主要介绍了jquery实现倒计时功能,详细介绍了setInterval()方法,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jquery倒计时功能的实现代码,供大家参考,具体内容如下

定义和用法:

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
下面举例

<html>
 <head>
  <meta charset="utf-8">
  <title>jquery简单倒计时</title>
  </style>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript">
 
   var intDiff = parseInt(60);//倒计时总秒数量
 
   function timer(intDiff) {
    window.setInterval(function() {
     var day = 0,
       hour = 0,
       minute = 0,
       second = 0;//时间默认值  
     if (intDiff > 0) {
      day = Math.floor(intDiff / (60 * 60 * 24));
      hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
      minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
      second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
     }
     if (minute <= 9)
      minute = '0' + minute;
     if (second <= 9)
      second = '0' + second;
     $('#day_show').html(day + "天");
     $('#hour_show').html('<s id="h"></s>' + hour + '时');
     $('#minute_show').html('<s></s>' + minute + '分');
     $('#second_show').html('<s></s>' + second + '秒');
     intDiff--;
    }, 1000);
   }
 
   $(function() {
    timer(intDiff);
   });
  </script>
 </head>
 <body>
  <h1>网页上的倒计时</h1>
  <div class="time-item">
   <span id="day_show">0天</span>
   <strong id="hour_show">0时</strong>
   <strong id="minute_show">0分</strong>
   <strong id="second_show">0秒</strong>
  </div>
  <!--倒计时模块-->
 </body>
</html>

希望本文所述对大家学习jquery程序设计有所帮助。

回复

使用道具 举报

3

主题

2万

回帖

172

积分

注册会员

Rank: 2

积分
172
发表于 2022-8-24 21:32:52 | 显示全部楼层
加快速度很快就撒谎
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

55

积分

注册会员

Rank: 2

积分
55
发表于 2022-9-17 17:29:12 | 显示全部楼层
需要很久了终于找到了
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-11-30 00:39:49 | 显示全部楼层
哈哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

8

主题

2万

回帖

52

积分

注册会员

Rank: 2

积分
52
发表于 2022-12-17 10:09:39 | 显示全部楼层
的沙发水电费水电费
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

380

积分

中级会员

Rank: 3Rank: 3

积分
380
发表于 2023-2-24 13:39:36 | 显示全部楼层
激动人心,无法言表!
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-4-23 05:03:06 | 显示全部楼层
管灌灌灌灌灌灌灌灌灌灌
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

120

积分

注册会员

Rank: 2

积分
120
发表于 2023-10-16 11:10:24 | 显示全部楼层
建军节建军节建军节建军节
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

87

积分

注册会员

Rank: 2

积分
87
发表于 2023-10-20 15:38:49 | 显示全部楼层
呵呵呵呵呵呵呵a
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

79

积分

注册会员

Rank: 2

积分
79
发表于 2024-3-31 19:59:12 | 显示全部楼层
好东西一定要看看!
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-2-2 15:07 , Processed in 0.066335 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表