我很难获得合适的日期和时间倒计时工作

Question

我似乎无法让网站正确显示天、小时、分钟和秒的正确信息。我正在尝试显示距离我的下一个活动还有多长时间。

匹配计数器

function matchCounter(){
        var launch = new Date('2019', '04', '18', '8', '00');
        var days = $('.tg-days');
        var hours = $('.tg-hours');
        var minutes = $('.tg-minutes');
        var seconds = $('.tg-seconds');
        setDate();
        function setDate(){
            var now = new Date();
            if( launch < now ){
                days.html('<h3>0</h3><h4>Day</h4>');
                hours.html('<h3>0</h3><h4>Hour</h4>');
                minutes.html('<h3>0</h3><h4>Minute</h4>');
                seconds.html('<h3>0</h3><h4>Second</h4>');
            }
            else{
                var s = -now.getTimezoneOffset()*60 + (launch.getTime() - now.getTime())/1000;
                var d = Math.floor(s/86400);
                days.html('<h3>'+d+'</h3><h4>Day'+(d>1?'s':''),'</h4>');
                s -= d*86400;
                var h = Math.floor(s/3600);
                hours.html('<h3>'+h+'</h3><h4>Hour'+(h>1?'s':''),'</h4>');
                s -= h*3600;
                var m = Math.floor(s/60);
                minutes.html('<h3>'+m+'</h3><h4>Minute'+(m>1?'s':''),'</h4>');
                s = Math.floor(s-m*60);
                seconds.html('<h3>'+s+'</h3><h4>Second'+(s>1?'s':''),'</h4>');
                setTimeout(setDate, 1000);
            }
        }
    }
    matchCounter();

我想显示距离 2019 年 5 月 19 日还有多长时间

Answer 1

我为你制作了一个新代码。它的工作正常。 请尝试一下。

HTML 代码：

<div class="event_counter_content">
<ul>
    <li>
        <span class="text">Days</span>
        <span class="number days" id="days">51</span>
    </li>

    <li>
        <span class="text">Hours</span>
        <span class="number hours" id="hours">16</span>
    </li>

    <li>
        <span class="text">Mins</span>
        <span class="number minutes" id="minutes">23</span>
    </li>

    <li>
     <span class="text">Secs</span>
     <span class="number seconds" id="seconds">24</span>
  </li>

CSS 代码：

.event_counter_content {
text-align: center;
max-width: 360px;
margin: 0 auto 30px;
display: table;
width: 100%;}
.event_counter_content ul li {
width: 25%;
float: left;
list-style: none;}
.text {
font-size: 16px;
color: #000;
text-align: center;
padding: 0 0 0;
text-shadow: none;
letter-spacing: 2px;
position: relative;
display: block;
text-transform: uppercase;}
.number {
font-size: 40px;
color: #000;
text-align: center;
text-shadow: none;
padding-bottom: 0;}

JS代码：

// Set the date we're counting down to
    var countDownDate = new Date("May 19, 2019 08:00:00").getTime();

    // Update the count down every 1 second
    var x = setInterval(function() {

        // Get todays date and time
        var now = new Date().getTime();

        // Find the distance between now an the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Output the result in an element with id="demo"

        jQuery( '.days' ).html( days );
        jQuery( '.hours' ).html( hours );
        jQuery( '.minutes' ).html( minutes );
        jQuery( '.seconds' ).html( seconds );

        // document.getElementById("days").innerHTML = days;
        // document.getElementById("hours").innerHTML = hours;
        // document.getElementById("minutes").innerHTML = minutes;
        // document.getElementById("seconds").innerHTML = seconds;

        // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRED";
        }
    }, 1000);

注意：请添加脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">