javascript 卡片堆栈 - 通过倒计时移除卡片

Question

我是一个很难的初学者，寻求帮助。

我正在尝试为“计划者”创建一个代码作为桌面版本，其中一扇门通过倒计时日复一日地打开。当前的门用五彩纸屑突出显示。

问题：最后一扇门（10 号）应在 24 小时后隐藏，倒计时应替换为一句“Aktion leider vorbei”。不幸的是，倒计时仍在继续，在设定的日期之后，所有门都再次可见，但所有门都应该隐藏，以便您可以看到图像背景...

对于移动版本，我正在尝试将这个概念应用到卡片堆栈中。这里只有第一张卡片（=card11）显示倒计时并计数到第一张卡片（=card1）。然后日复一日地取出一张卡片，并在最后一天出示卡片 10。之后就结束了，什么也没有留下。 所以这是代码： !CSS 有点奇怪并且发生了变化，但它可以在我的暂存平台上运行！ ！门号是混合的，因为背景图像（我没有将其放置在此处的代码中）！

const deadline = new Date("Jul 31, 2023 09:59:59");

var now = new Date().getTime();
// var distance = deadline.getTime() - now;

// Laufzeit, noch offene Tage, Tage erledigt
var daysTotal = 11;
var daysToGo = Math.ceil(((deadline) - now)/1000/60/60/24);
var daysDone = 11 - daysToGo;

(function ()
{
    const second = 1000, minute = second * 60,  hour = minute * 60, day = hour * 24;

    x = setInterval(function ()
    {         
        var distance = deadline.getTime() - Date.now();
        // nur Tage anzeigen, wenn nicht schon im Spiel

        if(daysDone <= 0)
        { 
            document.getElementById("k10os_days").innerText = Math.floor(distance / (day)) - daysTotal ;
        }

        document.getElementById("k10os_hours").innerText = Math.floor((distance % (day)) / (hour)),
        document.getElementById("k10os_minutes").innerText = Math.floor((distance % (hour)) / (minute)),
        document.getElementById("k10os_seconds").innerText = Math.floor((distance % (minute)) / second);

        if(daysDone > 0)
        {
            document.getElementById("k10os_headline_number").innerText = daysDone;
        }

        //do something later when date is reached
        if (distance < 0)
        {
            document.getElementById("k10os_headline").innerText = "Die Hütte brennt!";
            document.getElementById("k10os_cd_text").innerHTML = "Aktion leider vorbei"
            document.getElementById("k10os_countdown").style.display = "none";

            clearInterval(x);
        }
    }, 1000)
}());

console.log("daysToGo: " + daysToGo + " - daysDone" + daysDone);

var listItemsAktiv = document.getElementsByClassName("active");
var listItemsInaktiv = document.getElementsByClassName("inactive");

if(daysToGo >= 0)
{
    for(i = 0; i < (daysDone - 1); i++)
    {
        var elementActive = listItemsAktiv[i];
        var elementInactive = listItemsInaktiv[i];
        elementActive.classList.add("hide"); 
        elementInactive.classList.add("hide");   
    }
}

listItemsAktiv[i].classList.add("highlight"); 

for (var i = 0; i < 150; i++)
{
    create(i);
}

function create(i)
{
    var width = Math.random() * 8;
    var height = width * 0.4;
    var colourIdx = Math.ceil(Math.random() * 3);
    var colour = "red";
    switch(colourIdx)
    {
        case 1:
            colour = "yellow";
            break;
        case 2:
            colour = "blue";
            break;
        default:
            colour = "red";
    }

    $('<div class="confetti-'+i+' '+colour+'"></div>').css(
    {
        "width" : width+"px",
        "height" : height+"px",
        "top" : -Math.random()*20+"%",
        "left" : Math.random()*100+"%",
        "opacity" : Math.random()+0.5,
        "transform" : "rotate("+Math.random()*360+"deg)"
    }).appendTo('.highlight');  

    drop(i);
}

function drop(x)
{
    $('.confetti-'+x).animate(
    {
        top: "100%",
        left: "+="+Math.random()*15+"%"
    }, Math.random()*2000 + 2000, function()
    {
        reset(x);
    });
}

function reset(x)
{
    $('.confetti-'+x).animate(
    {
        "top" : -Math.random()*20+"%",
        "left" : "-="+Math.random()*15+"%"
    }, 0, function()
    {
        drop(x);             
    });
}        

"use strict";

let k10osContainer = document.querySelector(".k10os_mobile");
let allCards = document.querySelectorAll(".k10os--cards");
let currentCard;

let num = 11;

//create cards for page
function initCards(card, index)
{
    //the cards that haven't been removed
    var newCards = document.querySelectorAll(".k10os--card:not(.removed)");

    newCards.forEach(function (card, index)
    {

        card.style.zIndex = allCards.length - index;
        //angle the card and make it smaller the further back it goes
        card.style.transform = "scale(" + (20 - index) / 20 + ") translateY(-" + 45 * index + "px)";

    });

    k10osContainer.classList.add("loaded");
}

initCards();       

const anzahlTage = 11;
const daysInMilliSeconds = 24*60*60*1000;
const lastDay = new Date("Jul 29, 2023");
const startOfLastDay = new Date(lastDay.getTime() + daysInMilliSeconds);
var jetzt = Date.now();
var firstDay, daysDone, daysToGo, daysToStart;

daysToStart = startOfLastDay - (anzahlTage * daysInMilliSeconds) - jetzt;
daysToGo = startOfLastDay - Date.now();
daysDone = anzahlTage - Math.floor(daysToGo/daysInMilliSeconds);

console.log("Anzahl Tage: " + anzahlTage);
console.log("DaysToStart: " + Math.floor(daysToStart/daysInMilliSeconds));
console.log("DaysToGo: " + Math.floor(daysToGo/daysInMilliSeconds));
console.log("DaysDone: " + daysDone);

function shuffle(array)
{
    let currentIndex = array.length,  randomIndex;

    while (currentIndex != 0)
    {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;
        [array[currentIndex], array[randomIndex]] = [ array[randomIndex], array[currentIndex]];
    }

    return array;
}

// Reihenfolgen Randomize
var orderArray = [];
for(i = 1; i <= anzahlTage; i++)
{
    orderArray.push(i);
}


$(function()
{
    for(i = 1; i <= anzahlTage; i++)
    {
        if(i < daysDone)
        {
            $(".k10os--cards").append("<div id='card" + i + "' class='k10os--card hideItem' style='order:"+orderArray[i-1] + ";'></div>");
        }
        else if(i == daysDone)
        {
            $(".k10os--cards").append("<div id='card" + i + "' class='k10os--card currentItem' style='order:"+orderArray[i-1] + ";'><div id='card'>" + i + "</div></div>");
        }
        else
        {
            $(".k10os--cards").append("<div id='card" + i + "' class='k10os--card' style='order:"+orderArray[i-1] + ";'><div id='card'>" + i + "</div></div>");
        }
    }

    $( ".currentItem").toggleClass("hideItem");
});

.k10os_desktop
{
    width: 100%;
    height: 481px;
    font-family: "Arial", sans-serif;
}

.k10os_desktop h2
{
    text-align: left!important;
    font-size: 1rem!important;
    font-weight: bold;
}

.k10os_desktop h2:before
{
    content: none!important;
}

.k10os_subline, .k10os_subline_m
{
    font-size: 20px;
    font-family: "Brush Script MT", "Arial", cursive;
}

.k10os_subline p,
{
    color: #c90b1c;
}

#k10os p
{
    margin: 0 0 5px 0;
    color: #fff;
}

#k10os h1, h2, p
{
    font-family: "Arial", sans-serif;
    font-weight: normal;
}

#k10os h1
{
    font-size: 1.5rem;
}

#k10os h2
{
    font-size: 1.25rem;
}

#k10os li
{
    padding: 0 0 20px 0;
    margin-bottom: 30px;
}

#k10os a
{
    color: #C90b1c;
    text-decoration: none;
}

#k10os a
{
    padding: 10px;
    display: block;
}

#k10os a:hover, #k10os a:focus
{
    background-color: #c90b1c;
}


#k10os a:hover h2, #k10os a:focus h2
{
    text-decoration: none;
}

.left, .right
{
    display: none;
}

.hide
{
    visibility: hidden;
}

[class|="confetti"]
{
    position: absolute;
}

.red
{
    background-color: #d13447;
}

.yellow
{
    background-color: #ffbf00;
}

.blue
{
    background-color: #263672;
}

@media only screen and (max-width: 767px)
{
    .k10os_desktop
    {
        display: none !important;
    }

    .k10os--card.hideItem
    {
        visibility:hidden;
    }      


    .k10os_cd_m
    {
        width: 100%;
        height: 60px;
        position: relative;
        display: block;
        color: #fff;
        padding: 10px;

        top:-25px;
    }

    .k10os_cd_m p
    {
        font-size: 20px!important;
        color: #fff;
    }

    #k10os_countdown_m
    {
        position: relative;
        top: 10%;
    }


    #k10os_headline_m
    {
        letter-spacing: .125rem;
        text-transform: uppercase;
        font-size: 14px;
        text-align:center;
        color: #fff!important;
        padding-bottom: 22px;
    }

    .k10os_cd_m li
    {
        display: block;
        font-size: 0.825em;
        list-style-type: none;
        padding: 1em;
        text-transform: uppercase;
        color: #3c3c3b!important;
    }

    .k10os_cd_m li span
    {
        display: block;
        font-size: 1.5rem;
    }

    .k10os_mobile
    {
        display: flex!important;
        overflow: hidden;
        font-family: sans-serif;
    }

    .k10os_mobile h1, .k10os_mobile h2, .k10os_mobile h3, .cardNumber
    {
        text-align: right;
        pointer-events: none;
        color: #fff;
    }

    .k10os_mobile h2
    {
        margin-top: 2px;
        pointer-events: none;
    }

    .k10os_mobile
    {
        width: 100vw;
        height: 90vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
        opacity: 0;
        transition: opacity 0.1s ease-in-out;
    }

    .loaded.k10os_mobile
    {
        opacity: 1;
    }

    .k10os--cards
    {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        z-index: 1;
    }

    .k10os-card-logo-d
    {
        display: flex;
        flex-direction:column;
        align-items:flex-end;
        padding:10px;
    }    

    .k10os--card
    {
        display: inline-block;
        width: 80vw;
        max-width: 380px;
        height: 60vh;
        padding-bottom: 30px;
        border-radius: 8px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        border-color: transparent;
        border: 5px solid #fff;
        overflow: hidden;
        position: absolute;
        background: #930f0f;
    }

    .k10os--card > .limitImg
    {
        max-width: 100%;
        height: 50%;
        width: 380px;
        object-fit: cover;
        pointer-events: none;
    }      

    .k10os--card.cover
    {
        background: #c90b1c;
    }

    .k10os--card img
    {
        max-width: 100%;
        pointer-events: none;
        padding: 10px;
    }

    .k10os--card h3
    {
        margin-top: 5%;
        font-size: 32px;
        padding: 0 16px;
        pointer-events: none;
    }

    .k10os--card p,
    {
        pointer-events: none;
        padding: 10px;
    }

    .currentItem
    {
        color: red;
    }
}

@media only screen and (min-width : 768px)
{

    .k10os_mobile
    {
        display:none;
    }

    .k10os_desktop
    {
        width: 790px;
        height: 720px;
        margin: 0 auto;
        border-radius: 20px;
        border: #930f0f solid 10px;
        background: url("") 7px 18px no-repeat;
    }

    .k10os_subline
    {
        position: relative;
        bottom: 219px;
        left: 156px;
        font-size: 15px;
    }   

    .k10os_subline i
    {
        position: relative;
        left: -80px;
        bottom: -42px;
    }


    #k10os
    {
        position: relative;
        padding: 0;
        margin: 20px 0 0 7px;
        width: 754px;
        height: 603px;
    }

    #k10os li
    {
        position: absolute;
        padding: 0;
        margin: 0;
        list-style: none;
        width: 250px;
        height: 150px;
        overflow: hidden;
        border: #930f0f solid 1px;
    }

    #k10os li a
    {
        position: absolute;
        padding: 10px;
        width: 250px;
        height: 150px;
    }

    #k10os p, #k10os h2
    {
        font-size: 20px;
        line-height: 24px;
        margin: 0 0 8px 0;
        color: #FFF;
    }

    #k10os p
    {
        font-size: 14px;
        line-height: 18px;
    }

    #k10os a:hover, #k10os a:focus
    {
        background-color: #C90b1c;
    }

    #k10os span
    {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 24px;
        width: 40px;
        height: 40px;
        text-align: center;
        color: #FFF;
        background: #C90b1c;
        display: inline-block;
    }

    #k10os .left, #k10os .right {
        position: absolute;
        top: 0;
        width: 125px;
        height: 150px;
        display: block;
        background: #fff;
        border-top: #930f0f solid 6px;
    }

    #k10os .left
    {
        left: 0;
    }

    #k10os .right
    {
        left: 125px;
    }

    #k10os a:hover .left, #k10os a:focus .left
    {
        left: -125px;
    }

    #k10os a:hover .right, #k10os a:focus .right
    {
        left: 250px;
    }

    #k10os a .left, #k10os a .right
    {
        -ms-transition: left 0.5s;
        -o-transition: left 0.5s;
        -webkit-transition: left 0.5s;
        -moz-transition: left 0.5s;
        transition: left 0.5s;
    }

    #k10os a:hover .left, #k10os a:hover .right
    {
        -ms-transition: left 1s;
        -o-transition: left 1s;
        -webkit-transition: left 1s;
        -moz-transition: left 1s;
        transition: left 1s;
    }

    #ak1
    {
        top: 0px;
        left: 0px;
    }

    #ak6
    {
        top: 0px;
        left: 250px;
    }

    #ak8
    {
        top: 0px;
        left: 500px;
    }

    #ak7
    {
        top: 150px;
        left: 0px;
    }

    #ak9
    {
        top: 150px;
        left: 250px;
    }

    #ak10
    {
        top: 150px;
        left: 500px;
    }

    #ak4
    {
        top: 300px;
        left: 0px;
    }

    #ak3
    {
        top: 300px;
        left: 250px;
    }

    #ak2
    {
        top: 300px;
        left: 500px;
    }

    #ak5
    {
        top: 450px;
        left: 0px;
    }


    #ak1 .left
    {
        background-position: 0px 0px;
    }

    #ak6 .right
    {
        background-position: -125px 0px;
    }

    #ak8 .left
    {
        background-position: -250px 0px;
    }

    #ak7 .right
    {
        background-position: -375px 0px;
    }

    #ak9 .left
    {
        background-position: -500px 0px;
    }

    #ak10 .right
    {
        background-position: -625px 0px;
    }

    #ak4 .left
    {
        background-position: 0px -150px;
    }

    #ak3 .right
    {
        background-position: -125px -150px;
    }

    #ak2 .left
    {
        background-position: -250px -150px;
    }

    #ak5 .right
    {
        background-position: -375px -150px;
    }

    .k10os_cd
    {
        width: 66.4%;
        height: 150px;
        position: relative;
        display: block;
        color: #fff;
        left: 30%;
        top: -28%;
        text-align: center;
    }

    .k10os_cd p
    {
        font-size: 20px!important;
        color: #fff;
    }

    #k10os_countdown
    {
        position: relative;
        top: -13%;
        left: 4%;
    }

    #k10os_cd_text
    {
        left: 4%;
        position: relative;
    }

    .k10os_mobile
    {
        display: none !important;
    }

    .k10os_cd h1
    {
        font-weight: bold;
        letter-spacing: .125rem;
        text-transform: uppercase;
        font-size: 20px;
        margin-left: 8%;
        color: #fff!important;
    }

    .k10os_cd li
    {
        display: inline-block;
        font-size: 0.8em;
        list-style-type: none;
        padding: 1em;
        text-transform: uppercase;
    }

    .k10os_cd li span
    {
        display: block;
        font-size: 2.5rem;
    }
}

@media only screen and (min-width : 1045px)
{
    .k10os_mobile
    {
        display:none;
    }

    .k10os_subline
    {
        position: relative;
        bottom: 233px;
        left: 156px;
        font-size: 30px;
    }   

    .k10os_subline i
    {
        position: relative;
        left: -80px;
        bottom: -50px;
    }

    .k10os_desktop
    {
        width: 1040px;
        height: 600px;
        background: url("") 5px 14px no-repeat;
    }

    #k10os
    {
        width: 1004px;
        height: 481px;
    }

    #k10os .left, #k10os .right
    {
        background: #fff;
        border-top: #930f0f solid 6px;
    }

    #ak1
    {
        top: 0px;
        left: 0px;
    }

    #ak6
    {
        top: 0px;
        left: 250px;
    }

    #ak8
    {
        top: 0px;
        left: 500px;
    }

    #ak7
    {
        top: 0px;
        left: 750px;
    }

    #ak3
    {
        top: 150px;
        left: 0px;
    }

    #ak2
    {
        top: 150px;
        left: 250px;
    }

    #ak10
    {
        top: 150px;
        left: 500px;
    }

    #ak9
    {
        top: 150px;
        left: 750px;
    }

    #ak5
    {
        top: 300px;
        left: 0px;
    }

    #ak4
    {
        top: 300px;
        left: 250px;
    }

    #ak1 .left
    {
        background-position: 0px 0px;
    }

    #ak6 .right
    {
        background-position: -125px 0px;
    }

    #ak8 .left
    {
        background-position: -250px 0px;
    }

    #ak7 .right
    {
        background-position: -375px 0px;
    }

    #ak3 .left
    {
        background-position: -500px 0px;
    }

    #ak2 .right
    {
        background-position: -625px 0px;
    }

    #ak10 .left
    {
        background-position: -750px 0px;
    }

    #ak9 .right
    {
        background-position: -875px 0px;
    }

    #ak5 .left
    {
        background-position: 0px -150px;
    }

    #ak4 .right
    {
        background-position: -125px -150px;
    }

    .k10os_mobile
    {
        display: none !important;
    }

    .k10os_cd
    {
        width: 66.4%;
        height: 150px;
        position: relative;
        display: block;
        color: #fff;
        left: 38%;
        top: -35%;
        text-align: center;
    }

    .k10os_cd p
    {
        font-size: 20px!important;
        color: #fff;
    }

    #k10os_countdown
    {
        position: relative;
        left: 2%;
    }

    #k10os_cd_text
    {
        left: 4%;
        position: relative;
    }

    .k10os_mobile
    {
        display: none !important;
    }

    .k10os_cd h1
    {
        font-weight: bold;
        letter-spacing: .125rem;
        text-transform: uppercase;
        font-size: 20px;
        margin-left: 5%;
    }

    .k10os_cd li
    {
        display: inline-block;
        font-size: 0.8em;
        list-style-type: none;
        padding: 1em;
        text-transform: uppercase;
    }

    .k10os_cd li span
    {
        display: block;
        font-size: 2.5rem;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="k10os_desktop">
    <ol id="k10os">
        <li class="active" id="ak0"></li>
        <li class="active" id="ak1"></li>
        <li class="active" id="ak2"></li>
        <li class="active" id="ak3"></li>
        <li class="active" id="ak4"></li>
        <li class="active" id="ak5"></li>
        <li class="active" id="ak6"></li>
        <li class="active" id="ak7"></li>
        <li class="active" id="ak8"></li>
        <li class="active" id="ak9"></li>
        <li class="active" id="ak10"></li>
        
        <li class="inactive" id="ak1" title="Dieses Türchen öffnet sich erst am 12. August.">
            <div class="left"><span aria-hidden="true">1</span></div>
            <div class="right"></div>
        </li>

        <li class="inactive" id="ak2" title="Dieses Türchen öffnet sich erst am 13. August.">
            <div class="left"><span aria-hidden="true">2</span></div>
            <div class="right"></div>
        </li>
        
        <li class="inactive" id="ak3" title="Dieses Türchen öffnet sich erst am 14. August.">
            <div class="left"><span aria-hidden="true">3</span></div>
            <div class="right"></div>
        </li>

        <li class="inactive" id="ak4" title="Dieses Türchen öffnet sich erst am 15. August.">
            <div class="left"><span aria-hidden="true">4</span></div>
            <div class="right"></div>
        </li>

        <li class="inactive" id="ak5" title="Dieses Türchen öffnet sich erst am 16. August.">
            <div class="left"><span aria-hidden="true">5</span></div>
            <div class="right"></div>
        </li>

        <li class="inactive" id="ak6" title="Dieses Türchen öffnet sich erst am 17. August.">
            <div class="left"><span aria-hidden="true">6</span></div>
            <div class="right"></div>
        </li>

        <li class="inactive" id="ak7" title="Dieses Türchen öffnet sich erst am 18. August.">
            <div class="left"><span aria-hidden="true">7</span></div>
            <div class="right"></div>
        </li>

        <li class="inactive" id="ak8" title="Dieses Türchen öffnet sich erst am 19. August.">
            <div class="left"><span aria-hidden="true">8</span></div>
            <div class="right"></div>
        </li>

        <li class="inactive" id="ak9" title="Dieses Türchen öffnet sich erst am 20. August.">
            <div class="left"><span aria-hidden="true">9</span></div>
            <div class="right"></div>
        </li>

        <li class="inactive" id="ak10" title="Dieses Türchen öffnet sich erst am 21. August.">
            <div class="left"><span aria-hidden="true">10</span></div>
            <div class="right"></div>
        </li>
    </ol>

    <div class="k10os_cd">
        <h1 id="k10os_headline">Countdown zu Türchen Nr. <span id="k10os_headline_number">1</span></h1>
            
        <div id="k10os_countdown">
            <p class="k10os_cd_text"></p>
            <ul>
                <li><span id="k10os_days"></span>Tage</li>
                <li><span id="k10os_hours"></span>Stunden</li>
                <li><span id="k10os_minutes"></span>Minuten</li>
                <li><span id="k10os_seconds"></span>Sekunden</li>
            </ul>
        </div>
    </div>
    
    <div class="k10os_subline">
        <i class="fa-solid fa-gift fa-bounce fa-lg"></i>
        <p>WICHTIG:</p>
        <subline>Lass dich überraschen und entdecke jeden Tag um 10:00 Uhr dein Highlight!</subline>
    </div>
</div>
<div class="k10os_mobile">
    <div class="k10os--cards">
        <div class="k10os--card" id="card11" style='order:11'>
            <div class="k10os-card-logo-u"><img src="" width="80px;" height="80px;"></div>
            <div class="k10os_cd_m">
                <h3 id="k10os_headline_m">Countdown zu Karte Nr. 1</h3>
        
                <div id="k10os_countdown_m">
                    <ul>
                        <li><span id="k10os_days"></span>Tage</li>
                        <li><span id="k10os_hours"></span>Stunden</li>
                        <li><span id="k10os_minutes"></span>Minuten</li>
                        <li><span id="k10os_seconds"></span>Sekunden</li>
                    </ul>
                </div>
                <div class="k10os-card-logo-d"><img src="" width="80px;" height="80px;"></div>
            </div>  
        </div>
    
        <div class="k10os--card" id="card1" style='order:1'>
            <div class="cardNumber">1</div>
        </div>

        <div class="k10os--card" id="card2" style='order:2'>
            <div class="cardNumber">2</div>
        </div>

        <div class="k10os--card" id="card3" style='order:3'>
            <div class="cardNumber">3</div>
        </div>

        <div class="k10os--card"  id="card4" style='order:4'>
            <div class="cardNumber">4</div>
        </div>
    
        <div class="k10os--card"  id="card5" style='order:5'>
            <div class="cardNumber">5</div>
        </div>
    
        <div class="k10os--card" id="card6" style='order:6'>
            <div class="cardNumber">6</div>
        </div>
    
        <div class="k10os--card" id="card7" style='order:7'>
            <div class="cardNumber">7</div>
        </div>
    
        <div class="k10os--card" id="card8" style='order:8'>
            <div class="cardNumber">8</div>
        </div>
    
        <div class="k10os--card" id="card9" style='order:9'>
            <div class="cardNumber">9</div>
        </div>
    
        <div class="k10os--card"  id="card10" style='order:10'>
            <div class="cardNumber">10</div>
        </div>
    </div>
</div>