时间戳

首页 > 解决方案 > 带有倒计时日期的 HTML/Javascript 反向进度条

javascript - 带有倒计时日期的 HTML/Javascript 反向进度条

问题描述

在接近倒计时日期时，我似乎找不到会创建进度条清空的东西。

我找到了两个可以组合的单独示例，但我不知道如何：
倒计时- https://www.jqueryscript.net/time-clock/Minimal-jQuery-Any-Date-Countdown-Timer-Plugin-countdown。 html（第一个示例，简单文本倒计时）
进度条- https://jsfiddle.net/zessx/4PKEB/1/：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {    
function progress(timeleft, timetotal, $element) {
	var progressBarWidth = (timeleft / timetotal) * $element.width();
    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft + " seconds to go");
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};
progress(20, 20, $('#progressBar'));
});
</script>

<style>
#progressBar {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #0A5F44;
}

#progressBar div {
    height: 100%;
    text-align: right;
    padding: 0;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #CBEA00;
    box-sizing: border-box;
}
</style>

<div id="progressBar">
    <div></div>
</div>

更新问题
让我再解释一下我需要什么。
我需要结合两个链接中的代码并得到如下结果： 所以我最终需要的是倒计时文本（蓝色圆圈），实际上对应于进度条中的递减颜色（红色圆圈）。 简而言之，我想要一个带有文本的进度条，它计算特定日期的天数、小时、分钟、秒数，而不是特定时间。
在此处输入图像描述

我的整个html是：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Countdown Plugin Examples</title>

<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>

<script type="text/javascript">
$(function() {
    var endDate = "December 31, 2088 23:59:59";

    $('.countdown.simple').countdown({ date: endDate });

    // End time for diff purposes
    var endTimeDiff = new Date().getTime() + 15000;
    // This is server's time
    var timeThere = new Date();
    // This is client's time (delayed)
    var timeHere = new Date(timeThere.getTime() - 5434);
    // Get the difference between client time and server time
    var diff_ms = timeHere.getTime() - timeThere.getTime();
    // Get the rounded difference in seconds
    var diff_s = diff_ms / 1000 | 0;
});

$(document).ready(function() {
    function progress(timeleft, timetotal, $element) {
        //var progressBarWidth = timeleft * $element.width() / timetotal;
        var progressBarWidth = (timeleft / timetotal) * $element.width();
        $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear');
        if(timeleft > 0) {
            setTimeout(function() {
                progress(timeleft - 1, timetotal, $element);
            }, 1000);
        }
    };
    progress(20, 20, $('#progressBar'));
});
</script>

<style>
body {
    font: 13px/1.4 'Helvetica Neue', 'Helvetica','Arial', sans-serif;
    color: #333;
}
.container {
    width: 520px;
    margin: auto;
}
h1 {
    border-bottom: 1px solid #d9d9d9;
}
h2{
    position: relative;;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
}
h2:before{
    content: '\2192';
    position: absolute;
    left: -20px;
    font-size: 0.9em;
}
a {
    color: #be2221;
    text-decoration: none;
}

.simple {
    font-size: 20px;
    background: #27ae60;
    padding: 0.5em 0.7em;
    color: #ecf0f1;
    margin-bottom: 50px;
    -webkit-transition: background 0.5s ease-out;
    transition: background 0.5s ease-out;
}
.simple {
    margin-bottom: 50px;
}
.simple div {
    display: inline-block;
    margin-left: 10px;
    font-size: 30px;
    font-weight: 100;
    line-height: 1;
    text-align: right;
}
/* IE7 inline-block hack */
*+html .simple div {
    display: inline;
    zoom: 1;
}
.simple div:first-child {
    margin-left: 0;
}
.simple div span {
    display: block;
    border-top: 1px solid #cecece;
    padding-top: 3px;
    font-size: 12px;
    font-weight: normal;
    text-transform: uppercase;
    text-align: left;
}

#progressBar {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #fff;
    border:1px solid #ddd;
}
#progressBar div {
    height: 100%;
    text-align: right;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #CBEA00;
    box-sizing: border-box;
}
</style>
</head>

<body>
<div class="container" style="margin-top:50px;">
    <h2>Simple text countdown</h2>
    <div class="countdown simple" data-date="December 31, 2018 23:59:59"></div>

    <div id="progressBar">
        <div></div>
    </div>
</div>
</body>
</html>

任何帮助将不胜感激！！

标签： javascriptdateprogress-barreversecountdown

解决方案

我知道回答有点晚了，但这是以防万一其他人需要这个开始和结束日期。

基于Lowell Ed Llames的回答：

 $(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>

推荐阅读