12 小时 GMT 基于时间的进度条

编程问答 2022-04-30

问题描述

我一直在尝试通过 [fors4ken] 修改下面的这段代码，以便为我的项目工作。 (HTML/Javascript reverse progress bar with countdown date)

 $(document).ready(function() {
    function progress(timeleft,timetotal,$element) {

        let days = parseInt(timeleft / 86400);
        let hoursLeft = parseInt(timeleft - days * 86400);
        let hours = parseInt(hoursLeft / 3600);
        let minutesLeft = parseInt(hoursLeft - hours * 3600);
        let minutes = parseInt(minutesLeft / 60);
        let seconds = parseInt(timeleft % 60);

        let progressBarWidth = timeleft / timetotal * $element.width();

        $element
        .find("div")
        .css('width',progressBarWidth );
        $('.timeleft').html(
         `${days} days,${hours} hours,${minutes} minutes,${seconds} seconds`);
        if (timeleft > 0)
        setTimeout(() => progress(timeleft - 1,$element),1000);
    }

    // Starting Date
    let dateStart = new Date('2021-03-10');

    // Ending Date
    let dateEnd   = new Date('2021-03-20');

    // Current Date
    let dateNow   = new Date('2021-03-17');

    let timetotal = (dateEnd.getTime() / 1000) - (dateStart.getTime() / 1000);
    let timeleft  = (dateEnd.getTime() / 1000) - (dateNow.getTime() / 1000);

    progress(timeleft,$("#progressBar"));
 });
#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #ececee;
  border-radius: 15px;
  overflow: hidden;
}
#progressBar div {
   height: 100%;
   text-align: right;
   padding: 0;    /* remove padding */
   line-height: 22px;
   width: 0;
   background-color: #7ac843;
   Box-sizing: border-Box;
   overflow: visible;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jqueryscript.net/demo/Minimal-jQuery-Any-Date-Countdown-Timer-Plugin-countdown/dest/jquery.countdown.js"></script>
  
<p>Time left: <span class="timeleft"></span></p>
<div id="progressBar">
    <div></div>
</div>

但在我的情况下，我不希望日/月/年中的日期只是像上午 8:20 - 9:50 这样的时间，因为一年中总是有一个活动课程，我希望进度条时间是从“计时器”div 中挑选，如果有帮助，将不胜感激，下面是我想要实现的图像和代码。 https://imgur.com/a/oPabdaf

@media screen,projection{
*,:after,:before{Box-sizing:border-Box;-webkit-tap-highlight-color:transparent;}
ul,ul li{margin:0;padding:0;}
}
*{-webkit-Box-sizing:border-Box;-moz-Box-sizing:border-Box;Box-sizing:border-Box;}
*:before,*:after{-webkit-Box-sizing:border-Box;-moz-Box-sizing:border-Box;Box-sizing:border-Box;}
ul{margin-top:0;margin-bottom:10px;}
ul{list-style:none;padding-left:0;}
::-webkit-input-placeholder{opacity:1!important;color:#8a92a5!important;}
::-moz-placeholder{opacity:1!important;color:#8a92a5!important;}
:-moz-placeholder{opacity:1!important;color:#8a92a5!important;}
::-ms-clear{display:none;}
}
/*! CSS Used from: Embedded */
@media all{
@media screen,ul li{margin:0;padding:0;}
.sub_name{color:#9da2a5;font-size:12px;font-weight:400;margin:0;}
@media only screen and (min-width:768px){
.sub_name{font-size:13px;}
}
@media only screen and (min-width:1280px){
.sub_name{font-size:14px;}
}
.barstyle{bottom:0;left:0;height:3px;left:auto;right:0;}
._progressbar{height:3px;background:#5b6267;transition:.25s ease-in-out;transition-property:opacity,visibility;}
.time_used{height:100%;background:#22b1ff;}
.all_class{transition:transform .5s;white-space:Nowrap;}
.class_list{vertical-align:top;white-space:normal;}
.classrooms ul{list-style:none;margin-left:-3px;margin-right:-3px;}
.classrooms li{Box-sizing:border-Box;display:inline-block;padding:3px;vertical-align:top;width:299px;}
@media only screen and (min-width:1280px){
.classrooms li{width:25%;}
}
}
*{-webkit-Box-sizing:border-Box;-moz-Box-sizing:border-Box;Box-sizing:border-Box;}
*:before,*:after{-webkit-Box-sizing:border-Box;-moz-Box-sizing:border-Box;Box-sizing:border-Box;}
ul{margin-top:0;margin-bottom:10px;}
ul{list-style:none;padding-left:0;}
::-webkit-input-placeholder{opacity:1!important;color:#8a92a5!important;}
::-moz-placeholder{opacity:1!important;color:#8a92a5!important;}
:-moz-placeholder{opacity:1!important;color:#8a92a5!important;}
::-ms-clear{display:none;}



<div class="classrooms">
    <ul class="all_class">
        <li class="class_list">
            
                <div class="class_name class_numb class_style">
                    Class One
                </div>
                <div class="subject">
                    <div>
                        <div class="sub_name">Maths</div>
                        <div class="timer">8:00am - 10:30am</time>
                    </div>
                    <div class="progdiv progBox">
                        <div class="_progressbar barstyle" style="background-color: rgb(4 4 4 / 15%);">
                            <div class="time_used" style="width: 8%;background-color: rgb(181 27 46);"></div>
                        </div>
                    </div>
                </div>
            
        </li>
        <li class="class_list">
            
                <div class="class_name class_numb class_style">
                    Class Two
                </div>
                <div class="subject">
                    <div>
                        <div class="sub_name">Coding (Javascript)</div>
                        <div class="timer">7:00am - 12:30pm</time>
                    </div>
                    <div class="progdiv progBox">
                        <div class="_progressbar barstyle" style="background-color: rgb(4 4 4 / 15%);">
                            <div class="time_used" style="width: 36%;background-color: rgb(181 27 46);"></div>
                        </div>
                    </div>
                </div>
            
        </li>
        <li class="class_list">
            
                <div class="class_name class_numb class_style">
                    Class Three
                </div>
                <div class="subject">
                    <div>
                        <div class="sub_name">Science</div>
                        <div class="timer">7:20am - 11:30am</time>
                    </div>
                    <div class="progdiv progBox">
                        <div class="_progressbar barstyle" style="background-color: rgb(4 4 4 / 15%);">
                            <div class="time_used" style="width: 54%;background-color: rgb(181 27 46);"></div>
                        </div>
                    </div>
                </div>
            
        </li>
        <li class="class_list">
            
                <div class="class_name class_numb class_style">
                    Class Four
                </div>
                <div class="subject">
                    <div>
                        <div class="sub_name">Coding (Java)</div>
                        <div class="timer">8:00am - 11:30pm</time>
                    </div>
                    <div class="progdiv progBox">
                        <div class="_progressbar barstyle" style="background-color: rgb(4 4 4 / 15%);">
                            <div class="time_used" style="width: 14%;background-color: rgb(181 27 46);"></div>
                        </div>
                    </div>
                </div>
            
        </li>
    </ul>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptprogresstimetime