【jquery】简单的倒计时效果

最新推荐文章于 2024-07-14 03:33:38 发布

会做饭的技术男

最新推荐文章于 2024-07-14 03:33:38 发布

阅读量205

点赞数

分类专栏：前端文章标签： jquery countdown 倒计时

原文链接：https://www.mk2048.com/blog/blog.php?id=h1jaik2baa0j&title=%E3%80%90jquery%E3%80%91%E7%AE%80%E5%8D%95%E7%9A%84%E5%80%92%E8%AE%A1%E6%97%B6%E6%95%88%E6%9E%9C

版权

前端专栏收录该内容

2508 篇文章 12 订阅

订阅专栏

前天做了一个活动项目，其中有一块需要做倒计时的效果，由于需求比较简单，所以也就没用网上各种倒计时的插件。今天抽空整理出来，分享给大家。

html 代码如下：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>倒计时效果</title>
    <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
    <style type="text/css">
    #countDown{font-size:48px;line-height:10;text-align:center;}
    </style>
</head>
<body>
    <div id="countDown"></div>
</body>
</html>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function countDown(years,months,days,hours,minutes){
    var dateFinal = new Date(years,months,days,hours,minutes);    //设置倒计时到达时间
    var dateNow = new Date();    //获取系统当前时间
    var dateSub = dateFinal - dateNow;    //计算差值，单位毫秒
    var day = hour = minute = second = dayBase = hourBase = minuteBase = secondBase = 0;    //初始化各个数值
    var timeHtml = '';
    timeHtml  = '距离'   years   '年'   toDouble(months   1)   '月'   toDouble(days)   '日'   toDouble(hours)   '时'   toDouble(minutes)   '分还剩下';
    dayBase = 24 * 60 * 60 * 1000;    //计算天数的基数，单位毫秒。1天等于24*60*60*1000毫秒
    hourBase = 60 * 60 * 1000;    //计算小时的基数，单位毫秒。1小时等于60*60*1000毫秒
    minuteBase = 60 * 1000;    //计算分钟的基数，单位毫秒。1分钟等于60*1000毫秒
    secondBase = 1000;    //计算秒钟的基数，单位毫秒。1秒钟等于1000毫秒
    day = Math.floor(dateSub / dayBase);    //计算天数，并取下限值。如 5.9天 = 5天
    hour = Math.floor(dateSub % dayBase / hourBase);    //计算小时，并取下限值。如 20.59小时 = 20小时
    minute = Math.floor(dateSub % dayBase % hourBase / minuteBase);    //计算分钟，并取下限值。如 20.59分钟 = 20分钟
    second = Math.floor(dateSub % dayBase % hourBase % minuteBase / secondBase);    //计算秒钟，并取下限值。如 20.59秒 = 20秒
    //当天数小于等于0时，就不用显示
    if(day <= 0){
        timeHtml  = toDouble(hour)   '时'   toDouble(minute)   '分'   toDouble(second)   '秒';
    }else{
        timeHtml  = day   '天'   toDouble(hour)   '时'   toDouble(minute)   '分'   toDouble(second)   '秒';
    }
    $('#countDown').html(timeHtml);
}
//当小时，分钟和秒钟小于 10 的时候会显示为个位数，比较难看，需要在前面加 0。
function toDouble(num){
    if(num < 10){
        return '0'  num;
    }else{
        return ''   num;
    }
}
$(function(){
    setInterval(function(){
        countDown(2013,4,1,10,0);
    },1000);
});
</script>

PS：

1、以上是本人通过所学的 jquery 知识，随意写的一些效果。

2、在 javascript 中月份的编号是从 0 开始的，即 4 表示为 5 月份。

3、该效果是依据系统时间来计算的，并不是按照服务器时间来计算。

会做饭的技术男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【jquery】简单的倒计时效果

前天做了一个活动项目，其中有一块需要做倒计时的效果，由于需求比较简单，所以也就没用网上各种倒计时的插件。今天抽空整理出来，分享给大家。 html 代码如下： <!DOCTYPE HTML><htm...
复制链接

扫一扫