jquery仿照京东秒杀 倒计时特效

jquery仿照京东秒杀 倒计时特效

jquery仿照京东秒杀 倒计时特效,仿照京东秒杀,展示倒计时(时、分、秒)。取截止时间与当前时间对比,算出时间差并用定时器以秒的方式执行。默认截止时间为第二天零点。

使用方法
引入css和jQuery

1
2
<link rel="stylesheet" href="./css/cdn.css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
    <div class="se-kl">
        <div class="se-cn">倒计时</div>
        <div class="se-en">COUNT DOWN</div>
        <i class="se-io"></i>
        <div class="se-info">距离结束还剩</div>
        <div class="se-count">
            <div class="se-day"></div>
            <div class="se-hour"><span class="se-txt">00</span></div>
            <div class="se-min"><span class="se-txt">00</span></div>
            <div class="se-sec"><span class="se-txt">00</span></div>
        </div>
    </div>

jQuery代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
       function getDate(enddate) {
            var oDate = new Date(); //获取日期对象

            var nowTime = oDate.getTime(); //现在的毫秒数
            var enddate = new Date(enddate);
            var targetTime = enddate.getTime(); // 截止时间的毫秒数
            var second = Math.floor((targetTime - nowTime) / 1000); //截止时间距离现在的秒数

            var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天;一天有24*60*60=86400秒 ;
            second = second % 86400; //余数代表剩下的秒数;
            var hour = Math.floor(second / 3600); //整数部分代表小时;
            second %= 3600; //余数代表 剩下的秒数;
            var minute = Math.floor(second / 60);
            second %= 60;
            var spanH = $('.se-txt')[0];
            var spanM = $('.se-txt')[1];
            var spanS = $('.se-txt')[2];

            spanH.innerHTML = tow(hour);
            spanM.innerHTML = tow(minute);
            spanS.innerHTML = tow(second);
        }
当前内容只有登录了才能查看,如果您已经注册,请登录
3

发表评论