How do I get the current date and time in the format given Below

debugcn 投稿 Dev

Tanzeel Rahman

What I want to do in this line of code is:-

let current = new Date('2020-12-31 23:59:58').getTime();

I want to get the time just right now instead of the fixed time. Please tell me what I should do to get time from current time to time of 2021. I did try using a different method:-

let current = new Date(`${getFullYear()}-${getMonth()}-${getDate()} ${getHours()}:${getMinutes()}:${getSeconds()}`).getTime();

But it is giving some or the other error in all ways.

// Countdown script
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;

let current = new Date('2020-12-31 23:59:58').getTime();
//var d = new Date();

let countdown = new Date('2021-01-01 00:00:00').getTime();
//let current = new Date(`${d.getFullYear()}-${d.getMonth()}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`).getTime();
//let current = new Date(`${getFullYear()}-${getMonth()}-${getDate()} ${getHours()}:${getMinutes()}:${getSeconds()}`).getTime();
//let current = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`.getTime();

console.log(current);

let interval = setInterval(function() {
  let distance = countdown - current;

  if (distance <= 0) {
    clearInterval(interval);

    playAnimation();
  }

  document.getElementById('days').getElementsByClassName('number')[0].innerHTML = pad(parseInt(distance / day));
  document.getElementById('hours').getElementsByClassName('number')[0].innerHTML = pad(parseInt((distance % day) / hour));
  document.getElementById('minutes').getElementsByClassName('number')[0].innerHTML = pad(parseInt((distance % hour) / minute));
  document.getElementById('seconds').getElementsByClassName('number')[0].innerHTML = pad(parseInt((distance % minute) / second));
  current += second;
}, second);

function pad(n) {
  return (n < 10 ? '0' : '') + n;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>New Year Countdown 2020</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <div class="time-counter">
    <div id="days" class="box">
      <div class="label">days</div>
      <div class="number">00</div>
    </div>0
    <div id="hours" class="box">
      <div class="label">hours</div>
      <div class="number">00</div>
    </div>
    <div id="minutes" class="box">
      <div class="label">minutes</div>
      <div class="number">00</div>
    </div>
    <div id="seconds" class="box">
      <div class="label">seconds</div>
      <div class="number">00</div>
    </div>
  </div>

  <div class="fireworks-1 position-absolute">
    <img src="images/firework.svg" class="firework position-absolute" />
    <img src="images/firework.svg" class="firework position-absolute" />
    <img src="images/firework.svg" class="firework position-absolute" />
  </div>

  <div class="fireworks-2 position-absolute">
    <img src="images/firework.svg" class="firework position-absolute" />
    <img src="images/firework.svg" class="firework position-absolute" />
    <img src="images/firework.svg" class="firework position-absolute" />
  </div>

  <div class="fireworks-3 position-absolute">
    <img src="images/firework.svg" class="firework position-absolute" />
    <img src="images/firework.svg" class="firework position-absolute" />
    <img src="images/firework.svg" class="firework position-absolute" />
  </div>

  <svg id="new-year-text" viewBox="0 0 648 301" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M67.0664 52H54.7969V30.625H36.6211V52H24.2812V0.8125H36.6211V21.1328H54.7969V0.8125H67.0664V52ZM104.613 42.4375H87.7031L84.75 52H71.5664L90.3398 0.8125H101.941L120.855 52H107.602L104.613 42.4375ZM90.6562 32.9102H101.66L96.1406 15.1562L90.6562 32.9102ZM136.957 34.6328V52H124.617V0.8125H145.043C148.957 0.8125 152.414 1.53906 155.414 2.99219C158.438 4.42188 160.77 6.47266 162.41 9.14453C164.074 11.793 164.906 14.8047 164.906 18.1797C164.906 23.1719 163.113 27.168 159.527 30.168C155.965 33.1445 151.066 34.6328 144.832 34.6328H136.957ZM136.957 25.1055H145.043C147.434 25.1055 149.25 24.5078 150.492 23.3125C151.758 22.1172 152.391 20.4297 152.391 18.25C152.391 15.8594 151.746 13.9492 150.457 12.5195C149.168 11.0898 147.41 10.3633 145.184 10.3398H136.957V25.1055ZM183.855 34.6328V52H171.516V0.8125H191.941C195.855 0.8125 199.312 1.53906 202.312 2.99219C205.336 4.42188 207.668 6.47266 209.309 9.14453C210.973 11.793 211.805 14.8047 211.805 18.1797C211.805 23.1719 210.012 27.168 206.426 30.168C202.863 33.1445 197.965 34.6328 191.73 34.6328H183.855ZM183.855 25.1055H191.941C194.332 25.1055 196.148 24.5078 197.391 23.3125C198.656 22.1172 199.289 20.4297 199.289 18.25C199.289 15.8594 198.645 13.9492 197.355 12.5195C196.066 11.0898 194.309 10.3633 192.082 10.3398H183.855V25.1055ZM237.152 23.0312L246.574 0.8125H259.898L243.41 33.6133V52H230.895V33.6133L214.441 0.8125H227.695L237.152 23.0312ZM324.305 52H312.035L293.895 20.1484V52H281.555V0.8125H293.895L312 32.6641V0.8125H324.305V52ZM363.855 30.3086H344.449V42.5078H367.371V52H332.109V0.8125H367.441V10.3398H344.449V21.1328H363.855V30.3086ZM412.055 32.9102L417.926 0.8125H430.16L419.297 52H406.5L399.645 22.8203L392.93 52H380.168L369.27 0.8125H381.539L387.41 32.9102L394.441 0.8125H404.918L412.055 32.9102ZM471.645 23.0312L481.066 0.8125H494.391L477.902 33.6133V52H465.387V33.6133L448.934 0.8125H462.188L471.645 23.0312ZM529.863 30.3086H510.457V42.5078H533.379V52H498.117V0.8125H533.449V10.3398H510.457V21.1328H529.863V30.3086ZM567.48 42.4375H550.57L547.617 52H534.434L553.207 0.8125H564.809L583.723 52H570.469L567.48 42.4375ZM553.523 32.9102H564.527L559.008 15.1562L553.523 32.9102ZM606.504 33.9297H599.824V52H587.484V0.8125H607.629C613.699 0.8125 618.445 2.16016 621.867 4.85547C625.289 7.55078 627 11.3594 627 16.2812C627 19.8438 626.273 22.7969 624.82 25.1406C623.391 27.4844 621.141 29.3828 618.07 30.8359L628.758 51.4727V52H615.539L606.504 33.9297ZM599.824 24.4023H607.629C609.973 24.4023 611.73 23.793 612.902 22.5742C614.098 21.332 614.695 19.6094 614.695 17.4062C614.695 15.2031 614.098 13.4805 612.902 12.2383C611.707 10.9727 609.949 10.3398 607.629 10.3398H599.824V24.4023Z"
                fill="white" />
            <path
                d="M147.828 298H4.95312V267.062L70.7656 197.875C86.9844 179.406 95.0938 164.734 95.0938 153.859C95.0938 145.047 93.1719 138.344 89.3281 133.75C85.4844 129.156 79.9062 126.859 72.5938 126.859C65.375 126.859 59.5156 129.953 55.0156 136.141C50.5156 142.234 48.2656 149.875 48.2656 159.062H0.734375C0.734375 146.5 3.875 134.922 10.1562 124.328C16.4375 113.641 25.1562 105.297 36.3125 99.2969C47.4688 93.2969 59.9375 90.2969 73.7188 90.2969C95.8438 90.2969 112.859 95.4062 124.766 105.625C136.766 115.844 142.766 130.516 142.766 149.641C142.766 157.703 141.266 165.578 138.266 173.266C135.266 180.859 130.578 188.875 124.203 197.312C117.922 205.656 107.75 216.859 93.6875 230.922L67.25 261.438H147.828V298ZM313.906 214.328C313.906 241.984 307.672 263.312 295.203 278.312C282.828 293.312 265.344 300.812 242.75 300.812C219.969 300.812 202.344 293.266 189.875 278.172C177.406 263.078 171.172 241.797 171.172 214.328V176.922C171.172 149.266 177.359 127.938 189.734 112.938C202.203 97.9375 219.781 90.4375 242.469 90.4375C265.156 90.4375 282.734 97.9844 295.203 113.078C307.672 128.172 313.906 149.5 313.906 177.062V214.328ZM266.516 170.875C266.516 156.156 264.594 145.188 260.75 137.969C256.906 130.656 250.812 127 242.469 127C234.312 127 228.359 130.375 224.609 137.125C220.953 143.875 218.984 154.094 218.703 167.781V220.094C218.703 235.375 220.625 246.578 224.469 253.703C228.312 260.734 234.406 264.25 242.75 264.25C250.812 264.25 256.766 260.828 260.609 253.984C264.453 247.047 266.422 236.219 266.516 221.5V170.875ZM481.391 298H338.516V267.062L404.328 197.875C420.547 179.406 428.656 164.734 428.656 153.859C428.656 145.047 426.734 138.344 422.891 133.75C419.047 129.156 413.469 126.859 406.156 126.859C398.938 126.859 393.078 129.953 388.578 136.141C384.078 142.234 381.828 149.875 381.828 159.062H334.297C334.297 146.5 337.438 134.922 343.719 124.328C350 113.641 358.719 105.297 369.875 99.2969C381.031 93.2969 393.5 90.2969 407.281 90.2969C429.406 90.2969 446.422 95.4062 458.328 105.625C470.328 115.844 476.328 130.516 476.328 149.641C476.328 157.703 474.828 165.578 471.828 173.266C468.828 180.859 464.141 188.875 457.766 197.312C451.484 205.656 441.312 216.859 427.25 230.922L400.812 261.438H481.391V298ZM647.469 214.328C647.469 241.984 641.234 263.312 628.766 278.312C616.391 293.312 598.906 300.812 576.312 300.812C553.531 300.812 535.906 293.266 523.438 278.172C510.969 263.078 504.734 241.797 504.734 214.328V176.922C504.734 149.266 510.922 127.938 523.297 112.938C535.766 97.9375 553.344 90.4375 576.031 90.4375C598.719 90.4375 616.297 97.9844 628.766 113.078C641.234 128.172 647.469 149.5 647.469 177.062V214.328ZM600.078 170.875C600.078 156.156 598.156 145.188 594.312 137.969C590.469 130.656 584.375 127 576.031 127C567.875 127 561.922 130.375 558.172 137.125C554.516 143.875 552.547 154.094 552.266 167.781V220.094C552.266 235.375 554.188 246.578 558.031 253.703C561.875 260.734 567.969 264.25 576.312 264.25C584.375 264.25 590.328 260.828 594.172 253.984C598.016 247.047 599.984 236.219 600.078 221.5V170.875Z"
                fill="white" />
        </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
  <script src="js/app.js"></script>
</body>

</html>

mplungjan

Your script does what you ask it to do. Change to

let current = new Date().getTime();
let countdown = new Date('2021-01-01 00:00:00').getTime();

// Countdown script
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;

let current = new Date().getTime();

let countdown = new Date('2021-01-01 00:00:00').getTime();

console.log(current);

let interval = setInterval(function() {
  let distance = countdown - current;

  if (distance <= 0) {
    clearInterval(interval);
console.log("Happy new year")
//    playAnimation();
  }

  document.getElementById('days').getElementsByClassName('number')[0].innerHTML = pad(parseInt(distance / day));
  document.getElementById('hours').getElementsByClassName('number')[0].innerHTML = pad(parseInt((distance % day) / hour));
  document.getElementById('minutes').getElementsByClassName('number')[0].innerHTML = pad(parseInt((distance % hour) / minute));
  document.getElementById('seconds').getElementsByClassName('number')[0].innerHTML = pad(parseInt((distance % minute) / second));
  current += second;
}, second);

function pad(n) {
  return (n < 10 ? '0' : '') + n;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>New Year Countdown 2020</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <div class="time-counter">
    <div id="days" class="box">
      <div class="label">days</div>
      <div class="number">00</div>
    </div>0
    <div id="hours" class="box">
      <div class="label">hours</div>
      <div class="number">00</div>
    </div>
    <div id="minutes" class="box">
      <div class="label">minutes</div>
      <div class="number">00</div>
    </div>
    <div id="seconds" class="box">
      <div class="label">seconds</div>
      <div class="number">00</div>
    </div>
  </div>

  <div class="fireworks-1 position-absolute">
    <img src="images/firework.svg" class="firework position-absolute" />
    <img src="images/firework.svg" class="firework position-absolute" />
    <img src="images/firework.svg" class="firework position-absolute" />
  </div>

  <div class="fireworks-2 position-absolute">
    <img src="images/firework.svg" class="firework position-absolute" />
    <img src="images/firework.svg" class="firework position-absolute" />
    <img src="images/firework.svg" class="firework position-absolute" />
  </div>

  <div class="fireworks-3 position-absolute">
    <img src="images/firework.svg" class="firework position-absolute" />
    <img src="images/firework.svg" class="firework position-absolute" />
    <img src="images/firework.svg" class="firework position-absolute" />
  </div>

  <svg id="new-year-text" viewBox="0 0 648 301" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M67.0664 52H54.7969V30.625H36.6211V52H24.2812V0.8125H36.6211V21.1328H54.7969V0.8125H67.0664V52ZM104.613 42.4375H87.7031L84.75 52H71.5664L90.3398 0.8125H101.941L120.855 52H107.602L104.613 42.4375ZM90.6562 32.9102H101.66L96.1406 15.1562L90.6562 32.9102ZM136.957 34.6328V52H124.617V0.8125H145.043C148.957 0.8125 152.414 1.53906 155.414 2.99219C158.438 4.42188 160.77 6.47266 162.41 9.14453C164.074 11.793 164.906 14.8047 164.906 18.1797C164.906 23.1719 163.113 27.168 159.527 30.168C155.965 33.1445 151.066 34.6328 144.832 34.6328H136.957ZM136.957 25.1055H145.043C147.434 25.1055 149.25 24.5078 150.492 23.3125C151.758 22.1172 152.391 20.4297 152.391 18.25C152.391 15.8594 151.746 13.9492 150.457 12.5195C149.168 11.0898 147.41 10.3633 145.184 10.3398H136.957V25.1055ZM183.855 34.6328V52H171.516V0.8125H191.941C195.855 0.8125 199.312 1.53906 202.312 2.99219C205.336 4.42188 207.668 6.47266 209.309 9.14453C210.973 11.793 211.805 14.8047 211.805 18.1797C211.805 23.1719 210.012 27.168 206.426 30.168C202.863 33.1445 197.965 34.6328 191.73 34.6328H183.855ZM183.855 25.1055H191.941C194.332 25.1055 196.148 24.5078 197.391 23.3125C198.656 22.1172 199.289 20.4297 199.289 18.25C199.289 15.8594 198.645 13.9492 197.355 12.5195C196.066 11.0898 194.309 10.3633 192.082 10.3398H183.855V25.1055ZM237.152 23.0312L246.574 0.8125H259.898L243.41 33.6133V52H230.895V33.6133L214.441 0.8125H227.695L237.152 23.0312ZM324.305 52H312.035L293.895 20.1484V52H281.555V0.8125H293.895L312 32.6641V0.8125H324.305V52ZM363.855 30.3086H344.449V42.5078H367.371V52H332.109V0.8125H367.441V10.3398H344.449V21.1328H363.855V30.3086ZM412.055 32.9102L417.926 0.8125H430.16L419.297 52H406.5L399.645 22.8203L392.93 52H380.168L369.27 0.8125H381.539L387.41 32.9102L394.441 0.8125H404.918L412.055 32.9102ZM471.645 23.0312L481.066 0.8125H494.391L477.902 33.6133V52H465.387V33.6133L448.934 0.8125H462.188L471.645 23.0312ZM529.863 30.3086H510.457V42.5078H533.379V52H498.117V0.8125H533.449V10.3398H510.457V21.1328H529.863V30.3086ZM567.48 42.4375H550.57L547.617 52H534.434L553.207 0.8125H564.809L583.723 52H570.469L567.48 42.4375ZM553.523 32.9102H564.527L559.008 15.1562L553.523 32.9102ZM606.504 33.9297H599.824V52H587.484V0.8125H607.629C613.699 0.8125 618.445 2.16016 621.867 4.85547C625.289 7.55078 627 11.3594 627 16.2812C627 19.8438 626.273 22.7969 624.82 25.1406C623.391 27.4844 621.141 29.3828 618.07 30.8359L628.758 51.4727V52H615.539L606.504 33.9297ZM599.824 24.4023H607.629C609.973 24.4023 611.73 23.793 612.902 22.5742C614.098 21.332 614.695 19.6094 614.695 17.4062C614.695 15.2031 614.098 13.4805 612.902 12.2383C611.707 10.9727 609.949 10.3398 607.629 10.3398H599.824V24.4023Z"
                fill="white" />
            <path
                d="M147.828 298H4.95312V267.062L70.7656 197.875C86.9844 179.406 95.0938 164.734 95.0938 153.859C95.0938 145.047 93.1719 138.344 89.3281 133.75C85.4844 129.156 79.9062 126.859 72.5938 126.859C65.375 126.859 59.5156 129.953 55.0156 136.141C50.5156 142.234 48.2656 149.875 48.2656 159.062H0.734375C0.734375 146.5 3.875 134.922 10.1562 124.328C16.4375 113.641 25.1562 105.297 36.3125 99.2969C47.4688 93.2969 59.9375 90.2969 73.7188 90.2969C95.8438 90.2969 112.859 95.4062 124.766 105.625C136.766 115.844 142.766 130.516 142.766 149.641C142.766 157.703 141.266 165.578 138.266 173.266C135.266 180.859 130.578 188.875 124.203 197.312C117.922 205.656 107.75 216.859 93.6875 230.922L67.25 261.438H147.828V298ZM313.906 214.328C313.906 241.984 307.672 263.312 295.203 278.312C282.828 293.312 265.344 300.812 242.75 300.812C219.969 300.812 202.344 293.266 189.875 278.172C177.406 263.078 171.172 241.797 171.172 214.328V176.922C171.172 149.266 177.359 127.938 189.734 112.938C202.203 97.9375 219.781 90.4375 242.469 90.4375C265.156 90.4375 282.734 97.9844 295.203 113.078C307.672 128.172 313.906 149.5 313.906 177.062V214.328ZM266.516 170.875C266.516 156.156 264.594 145.188 260.75 137.969C256.906 130.656 250.812 127 242.469 127C234.312 127 228.359 130.375 224.609 137.125C220.953 143.875 218.984 154.094 218.703 167.781V220.094C218.703 235.375 220.625 246.578 224.469 253.703C228.312 260.734 234.406 264.25 242.75 264.25C250.812 264.25 256.766 260.828 260.609 253.984C264.453 247.047 266.422 236.219 266.516 221.5V170.875ZM481.391 298H338.516V267.062L404.328 197.875C420.547 179.406 428.656 164.734 428.656 153.859C428.656 145.047 426.734 138.344 422.891 133.75C419.047 129.156 413.469 126.859 406.156 126.859C398.938 126.859 393.078 129.953 388.578 136.141C384.078 142.234 381.828 149.875 381.828 159.062H334.297C334.297 146.5 337.438 134.922 343.719 124.328C350 113.641 358.719 105.297 369.875 99.2969C381.031 93.2969 393.5 90.2969 407.281 90.2969C429.406 90.2969 446.422 95.4062 458.328 105.625C470.328 115.844 476.328 130.516 476.328 149.641C476.328 157.703 474.828 165.578 471.828 173.266C468.828 180.859 464.141 188.875 457.766 197.312C451.484 205.656 441.312 216.859 427.25 230.922L400.812 261.438H481.391V298ZM647.469 214.328C647.469 241.984 641.234 263.312 628.766 278.312C616.391 293.312 598.906 300.812 576.312 300.812C553.531 300.812 535.906 293.266 523.438 278.172C510.969 263.078 504.734 241.797 504.734 214.328V176.922C504.734 149.266 510.922 127.938 523.297 112.938C535.766 97.9375 553.344 90.4375 576.031 90.4375C598.719 90.4375 616.297 97.9844 628.766 113.078C641.234 128.172 647.469 149.5 647.469 177.062V214.328ZM600.078 170.875C600.078 156.156 598.156 145.188 594.312 137.969C590.469 130.656 584.375 127 576.031 127C567.875 127 561.922 130.375 558.172 137.125C554.516 143.875 552.547 154.094 552.266 167.781V220.094C552.266 235.375 554.188 246.578 558.031 253.703C561.875 260.734 567.969 264.25 576.312 264.25C584.375 264.25 590.328 260.828 594.172 253.984C598.016 247.047 599.984 236.219 600.078 221.5V170.875Z"
                fill="white" />
        </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
  <script src="js/app.js"></script>
</body>

</html>