井井客

搜索

JQ日期倒计时距离还有多少天

主要修改了日期倒计时的一段JQ代码,原本的JQ代码是显示距离下一个日期(手写)还有多少天多少时多少分,修改后,可以在12个日期中,自动选择下一个日期并计算距离还有多少天。

JQ日期倒计时距离还有多少天

原来的JQ代码是为了计算下一期非农的日期倒计时,因为这个下一期的时间总是需要手写输入,我们又是用模板控制的,每次修改起来都要慎重。所以我把JQ代码稍微修改了一下,让它可以输入12个日期(一年),这样就达到不要每个月都改一次这个日期倒计时,而只要一年改一次的效果。

初始日期倒计时代码:

$(function(){
	$.getScript("http://www.114time.com/file/gettime.php", function(){
 		countDown('2016/4/1 20:30:00',"#Count .day","#Count .hour","#Count .minute",null,bjtime);
	});
});
function countDown(time,day_elem,hour_elem,minute_elem,second_elem,nowTime){		
    var end_time = new Date(time).getTime(),
    sys_second = (end_time-nowTime)/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);
        }
    }, 1000);
}

现在可以看到countDown中第一个参数传的是固定值,所以我把它修改成了一个变量,如下:

var setNextDate = ['1/1','2/5','3/4','4/1','5/6','6/3','7/1','8/5','9/2','10/7','11/4','12/2'];
var nextDate = '';
for( var tNum = 0; tNum < setNextDate.length ; tNum ++  ){
    nextDate = '2016/' + setNextDate[tNum] + ' 20:30:00';
    if(new Date(nextDate).getTime() > bjtime )  break;
}
countDown(nextDate,"#Count .day","#Count .hour","#Count .minute",null,bjtime);

先是定义一下数组变量,然后将这一年的12个非农日期输入进去,再定义一个字符串变量,做一个for循环,将数据中的单个值赋给变量nextDate,而将nextDate变量的值大于北京时间的值时(两个值都是计算的是距离1970/1/1所返回的毫秒数),跳出循环。

再结合一下页面本来的样式,丰富了一下页面上的类似时间轴的样式。

//距离下次时间(setNextDate数组中列出的日期需要与midd_time .date中列出的日期保持一一对应的关系)	
$(function(){
    $.getScript("http://www.114time.com/file/gettime.php", function(){
        var setNextDate = ['1/1','2/5','3/4','4/1','5/6','6/3','7/1','8/5','9/2','10/7','11/4','12/2'];
        var nextDate = '';
        for( var tNum = 0; tNum < setNextDate.length ; tNum ++  ){
            nextDate = '2016/' + setNextDate[tNum] + ' 20:30:00';
            $('.midd_time .date li').eq(tNum).addClass('pass').removeClass('past');
            if(new Date(nextDate).getTime() > bjtime ){
                $('.midd_time .date li').eq(tNum).addClass('next').removeClass('pass');
                $('.midd_time .date li').eq(tNum).append('<i></i>');
                break;
            }
        }
        countDown(nextDate,"#Count .day","#Count .hour","#Count .minute",null,bjtime);
     });
});
function countDown(time,day_elem,hour_elem,minute_elem,second_elem,nowTime){		
    var end_time = new Date(time).getTime(),
    sys_second = (end_time-nowTime)/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);
        }
    }, 1000);
}

相比原来的,就要好一些了,下一次只要在年未最后一次非农的日期来修改这个日期倒计时的时间就可以了~

点击就能查看:http://www.cngold.org/feinong/

文章TAG:JQ

作者:井井客整理来源:原创
本文标题:JQ日期倒计时距离还有多少天
本文链接:/c/1183.html

上一篇:验证输入框中的值是否为初始值
下一篇:IE各浏览器hack

文章分类

相关阅读

随便看看