zoukankan      html  css  js  c++  java
  • 横向时间进度条

    [javascript] view plain copy
     
    1. function ready(){  
    2.         if(${benefit==0}){  
    3.             $("#money").attr("disabled","disabled");  
    4.         }else{  
    5.             $("#money").removeAttr("disabled");  
    6.         }  
    7.           
    8.     var now = new Date();  
    9.     var hours = now.getHours();  
    10.     var minutes = now.getMinutes();  
    11.     var mm=parseInt(hours)*60+parseInt(minutes);//当前时间在当天的分钟数  
    12.         var marginleft=0;  
    13.           
    14.                 var strNow = now.getFullYear()+"-"+((now.getMonth()+1)<10?"0":"")+(now.getMonth()+1)+"-"+(now.getDate()<10?"0":"")+now.getDate();  
    15.                 var date0 = strNow+" 00:00:01";  
    16.         date0 = new Date(Date.parse(date0.replace(/-/g, "/")));  
    17.         var date1 = strNow+" 09:15:00";  
    18.         date1 = new Date(Date.parse(date1.replace(/-/g, "/")));  
    19.         var date2 = strNow+" 14:50:00";  
    20.         date2 = new Date(Date.parse(date2.replace(/-/g, "/")));  
    21.         var date3 = strNow+" 15:16:00";  
    22.         date3 = new Date(Date.parse(date3.replace(/-/g, "/")));  
    23.         var date4 = strNow+" 16:00:00";  
    24.         date4 = new Date(Date.parse(date4.replace(/-/g, "/")));  
    25.         var date5 = strNow+" 24:00:00";  
    26.         date5 = new Date(Date.parse(date5.replace(/-/g, "/")));  
    27.                 //此处555/890/916/960为每段时间点之前的分钟数,335/26/44/480为后四段时间的分钟数,100/100/58/70/122为每段标签的像素长度  
    28.                 //计算时间指针的左边距=(当前时间分钟数-前面时间分割点分钟数)/当前时间段的分钟数*当前时间段标签长度+前面所有标签的长度,  
    29.                 //简单来说就是用当前时间所在分段的百分比乘以当前分段的长度,然后加上前面所有分段的长度  
    30.                if(now>=date0&&now<=date1){  
    31.             marginleft=(mm/555*100)+"px";  
    32.         }else if(now>date1&&now<=date2){  
    33.             marginleft=((mm-555)/335*100+100)+"px";  
    34.         }else if(now>date2&&now<=date3){  
    35.             marginleft=((mm-890)/26*58+200)+"px";   
    36.         }else if(now>date3&&now<=date4){  
    37.             marginleft=((mm-916)/44*70+258)+"px";   
    38.         }else if(now>date4&&now<=date5){  
    39.             marginleft=((mm-960)/480*122+328)+"px";   
    40.         }  
    41.         $("#fubiao").css("margin-left",marginleft);  
    42.     }     
    43.   
    44.  ready();  


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

  • 相关阅读:
    洛谷3004 [USACO10DEC]宝箱Treasure Chest
    洛谷3778 [APIO2017]商旅
    洛谷4141消失之物——每个体积的角度
    洛谷2943 [USACO09MAR]清理Cleaning Up——转变枚举内容的dp
    bzoj1858[Scoi2010]序列操作
    poj1325机器工作——二分图最小点覆盖
    洛谷P1144——最短路计数
    poj3254二进制放牛——状态压缩DP
    poj1191棋盘分割——区间DP
    洛谷P1474货币系统——背包方案计数
  • 原文地址:https://www.cnblogs.com/zhangxiaolei521/p/5903494.html
Copyright © 2011-2022 走看看