倒计时 js vue

<div style="font-size: 36px; color: #ff0000; background-color: #232222">
          <span id="countdown"></span>
        </div>
        <script>
          // Set the date we're counting down to
          var countDownDate = new Date("Dec 30, 2023 00:00:00").getTime();

          // Update the countdown every 1 second
          var x = setInterval(function () {
            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and 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);

            // Display the countdown
            document.getElementById("countdown").innerHTML =
              days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

            // If the countdown is finished, write some text
            if (distance < 0) {
              clearInterval(x);
              document.getElementById("countdown").innerHTML = "EXPIRED";
            }
          }, 1000);
        </script>

你可能感兴趣的:(javascript,vue.js,前端)