横向时间进度条



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();

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值