横向时间进度条

时间：2016-09-24 17:40:15 阅读：221 评论：0 收藏：0 [点我收藏+]

标签：

技术分享

[javascript] view plain copy

function ready(){
if(${benefit==0}){
$("#money").attr("disabled","disabled");
}else{
$("#money").removeAttr("disabled");
}
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var mm=parseInt(hours)*60+parseInt(minutes);//当前时间在当天的分钟数
var marginleft=0;
var strNow = now.getFullYear()+"-"+((now.getMonth()+1)<10?"0":"")+(now.getMonth()+1)+"-"+(now.getDate()<10?"0":"")+now.getDate();
var date0 = strNow+" 00:00:01";
date0 = new Date(Date.parse(date0.replace(/-/g, "/")));
var date1 = strNow+" 09:15:00";
date1 = new Date(Date.parse(date1.replace(/-/g, "/")));
var date2 = strNow+" 14:50:00";
date2 = new Date(Date.parse(date2.replace(/-/g, "/")));
var date3 = strNow+" 15:16:00";
date3 = new Date(Date.parse(date3.replace(/-/g, "/")));
var date4 = strNow+" 16:00:00";
date4 = new Date(Date.parse(date4.replace(/-/g, "/")));
var date5 = strNow+" 24:00:00";
date5 = new Date(Date.parse(date5.replace(/-/g, "/")));
//此处555/890/916/960为每段时间点之前的分钟数，335/26/44/480为后四段时间的分钟数，100/100/58/70/122为每段标签的像素长度
//计算时间指针的左边距=（当前时间分钟数-前面时间分割点分钟数）/当前时间段的分钟数*当前时间段标签长度+前面所有标签的长度，
//简单来说就是用当前时间所在分段的百分比乘以当前分段的长度，然后加上前面所有分段的长度
if(now>=date0&&now<=date1){
marginleft=(mm/555*100)+"px";
}else if(now>date1&&now<=date2){
marginleft=((mm-555)/335*100+100)+"px";
}else if(now>date2&&now<=date3){
marginleft=((mm-890)/26*58+200)+"px";
}else if(now>date3&&now<=date4){
marginleft=((mm-916)/44*70+258)+"px";
}else if(now>date4&&now<=date5){
marginleft=((mm-960)/480*122+328)+"px";
}
$("#fubiao").css("margin-left",marginleft);
}
ready();

此处只是提供一个时间进度条的案例，让用户直观的看到当前能做的操作，并没有做时间指针自动移动，需要刷新页面才能看到指针移动，指针移动方法就请各位自行思考

横向时间进度条

标签：

原文地址：http://www.cnblogs.com/zhangxiaolei521/p/5903494.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行