zoukankan      html  css  js  c++  java
  • come on,make a date progress bar together!

    <!--style.css-->

     .loading{text-align:center;800px;height:30px;border-radius:15px;background:#a0a0a0;margin:10px auto;position:relative;}
    .loading>div{180px;height:30px;border-radius:15px;background:#01AAEF;margin:5px auto;position:absolute;left:0px;top:-5px;}
    .date{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");
    }

  • 相关阅读:
    PyQt5--Buttons
    PyQt5--Position
    PyQt5--ShowWindowCenter
    PyQt5--MessageBox
    PyQt5--CloseWindow
    PyQt5--ShowTips
    PyQt5---ChangeIcon
    PyQt5---firstwindow
    PyQt5--StatusBar
    PyQt5 的几个核心模块作用
  • 原文地址:https://www.cnblogs.com/no-broken-boy/p/4995109.html
Copyright © 2011-2022 走看看