come on,make a date progress bar together!
来源:互联网 发布:懒人js代码 编辑:程序博客网 时间:2024/06/05 15:17
<!--style.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-->
<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>
<!--jquery-->
//进度条值设置
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);
//计算出天数差函数
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");
}
- come on,make a date progress bar together!
- connecting scenes together to make a game
- Create a Progress Bar with Win32 project
- A progress bar (gauge box) -- dialog Linux
- Showing progress bar in a status bar pane
- Showing progress bar in a status bar pane
- progress bar
- Custom Control for Text Over a Progress Bar
- Showing Windows Progress Bar
- USE Progress Bar
- JQuery Progress Bar
- SlickUpload(Upload Progress Bar)
- APIDEMO PROGRESS BAR
- Android 自定义Progress Bar
- progress bar color
- Android 自定义Progress Bar
- 【AndEngine】Progress Bar HUD
- Android 自定义Progress Bar
- 我的IOS工程目录结构
- 读完这个我懂了JNDI
- 桶排序和基数排序
- 2010: Hardware Design Flow based on USA company
- 设计模式--简单工厂
- come on,make a date progress bar together!
- I9500联通定制版刷cm12.1
- maven springmvc mybatis
- android做支付宝移动支付时遇到跳转失败问题
- BC18hdoj5104&&hdoj5105&&hdoj5106
- 关于java以竖线作为分隔符split字符串的问题
- 程序编译链接运行深入剖析
- React-组件的复合
- 在Android5.0.2机子上采用AlarmManager轮询失败