时间戳

首页 > 解决方案 > 12 小时 GMT 时间进度条

javascript - 12 小时 GMT 时间进度条

问题描述

我一直在尝试通过 [fors4ken] 修改下面的代码以用于我的项目。（带有倒计时日期的 HTML/Javascript 反向进度条）

 $(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, timetotal, $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, timetotal, $("#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, projection{
*,:after,:before{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
ul,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>

标签： javascripttimeprogress

解决方案

推荐阅读