沉浸式阅读
Beta

JQ+JS实现倒计时功能

     订阅 网页特效     2016-09-05     网络转载    网络    1131    0    0    0    
学习要点:页面代码123456789divclass="time"class=""id="onBidtime125"pid="125"divclass="timeicon"/div距离结束:spanclass="day"-/span天spanclass="hour"-/span小时spanclass="minute"-/span分spanclass=&quo

QQ图片20160808205534.png

页面代码

1
2
3
4
5
6
7
8
9
<div class="time "  class=""  id="onBidtime125" pid="125">                
    <div class="timeicon" ></div>                
        距离结束:<span class="day">-</span> 天 <span class="hour">-</span> 小时 <span class="minute">-</span> 分 <span class="second">-</span> 秒 
        <script type="text/javascript">                            
            $(function(){                                
                endDown2("1472287680","1470660651","#onBidtime125","#onBidtime125 .day","#onBidtime125 .hour","#onBidtime125 .minute","#onBidtime125 .second");                            
            });                        
        </script>            
</div>

JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// 结束倒计时
//etime 结束时间
//ntime  服务器时间 
function endDown2(etime,ntime,boxobj,day_elem,hour_elem,minute_elem,second_elem)
    var now_time = new Date(ntime*1000);
    var end_time = new Date(etime*1000);
    var sys_second = (end_time-now_time)/1000;
    var timer = setInterval(function(){
        if (sys_second > 0) {
            sys_second -= 1;
            var day = Math.floor((sys_second / 3600) / 24);
            var hour = Math.floor((sys_second / 3600) % 24);
            var minute = Math.floor((sys_second / 60) % 60);
            var second = Math.floor(sys_second % 60);
            day_elem && $(day_elem).text(day);//计算天
            $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
            $(minute_elem).text(minute<10?"0"+minute:minute);//计算分
            $(second_elem).text(second<10?"0"+second:second);// 计算秒
        } else { 
            clearInterval(timer);
            $('#bidTimeStatus').remove();
            $(boxobj).html('');
            $(boxobj).addClass('end');
        }
    }, 1000);
}
// 开始倒计时
function startDown2(etime,ntime,boxobj,day_elem,hour_elem,minute_elem,second_elem){
    var now_time = new Date(ntime*1000);
    var end_time = new Date(etime*1000);
    var sys_second = (end_time-now_time)/1000;
    var timer = setInterval(function(){
        if (sys_second > 0) {
            sys_second -= 1;
            var day = Math.floor((sys_second / 3600) / 24);
            var hour = Math.floor((sys_second / 3600) % 24);
            var minute = Math.floor((sys_second / 60) % 60);
            var second = Math.floor(sys_second % 60);
            day_elem && $(day_elem).text(day);//计算天
            $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
            $(minute_elem).text(minute<10?"0"+minute:minute);//计算分
            $(second_elem).text(second<10?"0"+second:second);// 计算秒
        } else { 
            $('.noStartBidTbox .th').html('拍卖已开始');
            $(boxobj).html('');
            $(boxobj).addClass('into');
        }
    }, 1000);
}


需要时时与服务器同步时间JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
function endDown(etime,ntime,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem){
    var now_time = new Date(ntime*1000);
    var end_time = new Date(etime*1000);
    var native_time = new Date().getTime(); //本地时间
    var now_cha = now_time - native_time; //服务器和本地时间差
    var native_end_time = end_time - now_cha; //本地结束时间
    var sys_second = 0;
    var bidpids = $(boxobj).attr('pid');
    if(bidpids){
        var bidpid = bidpids;
    }
    endDowntimer = setInterval(function(){
        // 检查本地时间是否更改
        if(Math.abs(native_time - new Date().getTime())>1000){
            clearInterval(endDowntimer);
            $.post(ajaxGetTime, {'pid':bidpid},function(data){
                endDown(data.endtime,data.nowtime,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem);
            });
        }
        sys_second = (native_end_time - new Date().getTime())/100; //本地结束剩余时间
        if (sys_second > 0) {
            sys_second -= 1;
            var day = Math.floor((sys_second / 36000) / 24);
            var hour = Math.floor((sys_second / 36000) % 24);
            var minute = Math.floor((sys_second / 600) % 60);
            var second = Math.floor((sys_second/10) % 60);
            var msec = Math.floor(sys_second % 10); //毫秒
            day_elem && $(day_elem).text(day);//计算天
            $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
            $(minute_elem).text(minute<10?"0"+minute:minute);//计算分
            $(second_elem).text(second<10?"0"+second:second);// 计算秒
            $(msec_elem).text(msec);// 计算秒的1/10
            native_time = new Date().getTime();
        } else { 
            clearInterval(endDowntimer);
            // 本地时间结束提交服务器验证是否结束
            $.post(ajaxCheckSucc, {'pid':bidpid},function(data){
                if(data.status==0){
                    // startDown(data.end_time,data.now_time,".noStartTime",".noStartTime .day",".noStartTime .hour",".noStartTime .minute",".noStartTime .second",".noStartTime .msec");
                    endDown(data.end_time,data.now_time,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem);
                }else{
                    if(data.status==1){
                        $('#bidTimeStatus').remove();
                        $(boxobj).html('');
                        $(boxobj).addClass('end');
                        var user = data.nickname;
                        if(data.uid==userid){user ='您';}
                        var msg = '恭喜'+user+'以'+data.money+'元,拍到《'+data.pname+'》';
                    }else if (data.status==2){
                        var msg = '《'+data.pname+'》未达到保留价,流拍!'
                    }
                    popup.success(msg,'结束提示',function(action){
                //success 返回两个 action 值,分别是 'ok' 和 'close'。
                        if(action == 'ok'){
                            window.top.location.reload();
                        }
                        if(action == 'close'){
                            window.top.location.reload();
                        }
                    });
                }
            });
        }
    }, 100);
}
// 开始时间倒计时
function startDown(etime,ntime,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem){
    var now_time = new Date(ntime*1000);
    var end_time = new Date(etime*1000);
    var native_time = new Date().getTime(); //本地时间
    var now_cha = now_time - native_time; //服务器和本地时间差
    var native_end_time = end_time - now_cha; //本地结束时间
    var sys_second = 0;
    var bidpids = $(boxobj).attr('pid');
    if(bidpids){
        var bidpid = bidpids;
    }
    startDowntimer = setInterval(function(){
        if(Math.abs(native_time - new Date().getTime())>1000){
            clearInterval(startDowntimer);
            $.post(ajaxGetTime, {'pid':bidpid},function(data){
                startDown(data.endtime,data.nowtime,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem);
            });
        }
        sys_second = (native_end_time - new Date().getTime())/100; //本地结束剩余时间
        if (sys_second > 0) {
            sys_second -= 1;
            var day = Math.floor((sys_second / 36000) / 24);
            var hour = Math.floor((sys_second / 36000) % 24);
            var minute = Math.floor((sys_second / 600) % 60);
            var second = Math.floor((sys_second/10) % 60);
            var msec = Math.floor(sys_second % 10); //毫秒
            day_elem && $(day_elem).text(day);//计算天
            $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
            $(minute_elem).text(minute<10?"0"+minute:minute);//计算分
            $(second_elem).text(second<10?"0"+second:second);// 计算秒
            $(msec_elem).text(msec);// 计算秒的1/10
            native_time = new Date().getTime();
        } else { 
            $('.noStartBidTbox .th').html('拍卖已开始');
            $(boxobj).html('');
            $(boxobj).addClass('into');
            window.top.location.reload();
        }
    }, 100);
}

本文标题: JQ+JS实现倒计时功能

本文链接: https://www.mbkfw.com/course/319.html (转载时请注明来源链接)

本文说明: 有问题或投稿请发送至: 邮箱/kf@dtmuban.com    QQ/290948585

特别鸣谢: 如果您觉得本文对您有帮助,请给我们一个小小的赞,收藏本文更利于反复学习哦!

 
destoon程序前端开发标签生成器

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“商企云服”
"模板开发网前端开发教学"
每日干货技术分享
 
0

圈友点评

文明上网理性发言,请遵守网络评论服务协议


色彩
×

《客户实名在线注册登记》售后一直都在!

关注

微信
关注

微信扫一扫
不同的环境体验

幸运大转盘,好礼等您拿

模板开发网公众号

模板开发网微信小程序

代授权

程序
授权

黑小二

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。咨询客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

微信公众号: 商企云服

微信小程序: 模板开发

QQ客服 微信客服DT授权代办 在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 18:00

APP下载

安卓
APK

模板开发网安卓版APP

反馈

我要
反馈