countdown - 60 秒倒计时计时器，根据系统时间和日期显示，计时器结束时将不可见

Question

我有一个 60 分钟的倒计时。我正试图在特定时间之间获得这个节目。例如，仅当时间和日期为 19-05-2021 和 12:00 时才应显示单击“单击此处按钮”，并且应在系统时间为 12:01:00 小时（60 秒）时结束）。它不应该显示系统时间是否大于或小于同一天的时间范围。如果系统日期不是 19-05-2021，则不应显示计时器（如果系统时间不在 19-05-2021 的 12:00:00 - 12:01:00 之间，则不应显示该计时器）。倒计时完成后，我将收到一些文本和一个提交按钮。即使倒计时结束，这些文本也应该保留。

开始时间：19-05-2021 12:00:00 结束时间：19-05-2021 12:00:00 单击此处按钮 = 如果计时器与上述时间段不匹配，则不应显示计时器。任何快速回复将不胜感激。

太感谢了

<script>
    $(function(){
                $('.item').hide();
                $('.btn-one').click(function(){
                $('.btn-one').hide();
                $('.item').show();
                });
            }); 
</script>


    
        <script>
            
       
        setTimeout(function() { 
        $('.btn-two').hide();
            var time = 60; /* how long the timer will run (seconds) */
            var initialOffset = 351;
            var i = 0;

            /* Need initial run as interval hasn't yet occured... */
            $('.circle_animation').css('stroke-dashoffset', initialOffset+((i)*(initialOffset/time)));

            var interval = setInterval(function() {
                $('h2').text(time - i);
                if (i === time) {   
                    clearInterval(interval);
                        $('.item').hide();
                        $('.btn-two').show();
                    return;
                }

                $('.circle_animation').css('stroke-dashoffset', initialOffset+((i+1)*(initialOffset/time)));               
                
                i++;  
            }, 1000);
 
        }, 0)
        </script>

.item {
    position: relative;
    width:120px;
    height:120px;
    float: left;
    border-radius:100px;
    font-family:allianz neo regular;
    font-size:20pt;
}

.item h2 {
    text-align: center;
    position: absolute;
    line-height: 90px;
    width: 100%;
}

svg {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
    stroke-dasharray: 351;
    /* stroke-width: 5px; */
    /* this value is the pixel circumference of the circle */
    stroke-dashoffset: 351;
    transition: all 1s linear;
}


    
    
.btn-two{
                position:relative;
                float:left;
                width:280px;
                height:35px;
                border-radius:50px;
                background:#ff934f;
                font-family:allianz neo regular;
                font-size:14pt;
                color:#ffffff;
                top:20px;
                display:flex;
                align-items:center;
                justify-content:center;
                cursor:pointer;
                transition:0.5s;
                }
                
            .btn-two:hover{
                background:#fdd25c;
                color:#000000;
                }


.btn-one{
                position:relative;
                float:left;
                width:280px;
                height:35px;
                border-radius:50px;
                background:#ff934f;
                font-family:allianz neo regular;
                font-size:14pt;
                color:#ffffff;
                top:20px;
                display:flex;
                align-items:center;
                justify-content:center;
                cursor:pointer;
                transition:0.5s;
                }       

<div class="btn-one">Click here</div>
        <div>
        <div class="item">
            <h2>0</h2>
            <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
            <g>
            <title>Layer 1</title>
            <circle id="circle" class="circle_animation" r="56" cy="60" cx="60" stroke-width="8" stroke="#fdd25c" fill="none"/>
            </g>
            </svg>
        </div>
        <a href="#" target="_blank"> 
        <div class="btn-two" style="width:225px; height:43px;">
          Submit 
        </div> </a> 
    </div>

标签： countdowncountdowntimer