<!--style.css-->css
.loading{text-align:center;width:800px;height:30px;border-radius:15px;background:#a0a0a0;margin:10px auto;position:relative;}
.loading>div{width:180px;height:30px;border-radius:15px;background:#01AAEF;margin:5px auto;position:absolute;left:0px;top:-5px;}
.date{width:800px;height:30px;margin:5px auto;position:relative;}
.first-date{position:absolute;left:0;}
.last-date{position:absolute;right:0;}
.msg-duiwu{position:absolute;left:350px;font-size:18px;}
.remind-msg{position:absolute;left:350px;top:-75px;font-size:20px;font-weight:bold;}html
<!--html-->jquery
<div>
<div class="loading"><div></div></div>
<div class="date">
<span class="red remind-msg">距離結束有<span class="many-day">0</span>天</span>
<span class="first-date">2015-11-1</span>
<span class="msg-duiwu">XXX個隊伍</span>
<span class="last-date">2015-11-30</span>
</div> 函數
</div>ui
<!--jquery-->spa
//進度條值設置
var first_date=$(".first-date").text();
var last_date=$(".last-date").text();
var pWidth=$(".loading").width();
var today_date=changeDateTodayFormat();
var total_date_differ=parseFloat(DateDiff(first_date,last_date));
var real_date_differ=parseFloat(DateDiff(first_date,today_date));
var differ_date=parseFloat(DateDiff(today_date,last_date));
var percentage=real_date_differ/total_date_differ;
$(".many-day").text(differ_date);
setProgressBar(percentage,pWidth);orm
//計算出天數差函數
function DateDiff(sDate1, sDate2){ //sDate1和sDate2是2002-12-18格式
var aDate, oDate1, oDate2, iDays;
aDate = sDate1.split("-");
oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]); //轉換爲12-18-2002格式
aDate = sDate2.split("-");
oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 /24); //把相差的毫秒數轉換爲天數
return iDays;
}
//將日期進行轉化,要注意getMonth()+1,getFullYear而不是getYear
function changeDateTodayFormat(){
var today=new Date();
var year=today.getFullYear();
var month=today.getMonth()+1;
var date=today.getDate();
var now=year+"-"+month+"-"+date;
return now;
}
// 設置進度條,原理則是對部分求佔總體的百分比
function setProgressBar(progressPercentage,parentWidth){
$(".loading>div").css("width",progressPercentage*parentWidth+"px");
}htm