javascript 如何在7天后重置所提供代码中的计数器？

wbrvyc0a 于 2023-05-27 发布在 Java

关注(0)|答案(1)|浏览(93)

我已经创建了一个“即将推出”页面，但我无法理解如何在7天后重置所提供代码中的计数器。你能指导我如何做到这一点吗？
其他CSS和js文件很少，我需要共享它们吗？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">
        
        <title>Vistar Enterprises</title>

        <!-- Loading third party fonts -->
        <link href="fonts/font-awesome.min.css" rel="stylesheet" type="text/css">

        <!-- Loading main css file -->
        <link rel="stylesheet" href="style.css">
        
        <!--[if lt IE 9]>
        <script src="js/ie-support/html5.js"></script>
        <script src="js/ie-support/respond.js"></script>
        <![endif]-->

    </head>

    <body>
        
        <div class="site-content">
            
            <header class="site-header">
                <div class="container shrinked">
                    
                    <h1 class="logo"><a href="index.html">Vistar Enterprises</a></h1>
                    
                </div>  <!-- .container -->
            </header> <!-- .site-header -->

            <main class="main-content">
                <div class="container shrinked">
                    <h1 class="section-title center-aligned">We are preparing something new. <br> <span>Stay tuned!</span></h1>

                    <div class="counter-wrap" data-date-target="Dec 31, 2023 10:00:00">
                        <div class="counter days">
                            <div class="number">78</div>
                            <div class="caption">Days</div>
                        </div> <!-- .counter -->
                        <div class="counter hours">
                            <div class="number">24</div>
                            <div class="caption">Hours</div>
                        </div> <!-- .counter -->
                        <div class="counter minutes">
                            <div class="number">43</div>
                            <div class="caption">Minutes</div>
                        </div> <!-- .counter -->
                        <div class="counter seconds">
                            <div class="number">38</div>
                            <div class="caption">Seconds</div>
                        </div> <!-- .counter -->
                    </div> <!-- .counter-wrap -->

                </div>  <!-- .container -->
            </main> <!-- .main-content -->

            <footer class="site-footer">
                <div class="container shrinked">
                    
                    <p class="contact">For inquiries, contact us at:</p>
      <p><i class="fa fa-envelope"></i> mike@vistarenterprises.com</p>
                    <br>
                    
                    
                    <div class="social-links">
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-google-plus"></i></a>
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-pinterest"></i></a>
                    </div> <!-- .social-links -->

                    <div class="colophon">Copyright 2023 Vistar Enterprises. All right reserved</div>

                </div>  <!-- .container -->
            </footer> <!-- .site-footer -->

        </div>

        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/app.js"></script>
        
    </body>

</html>

JavaScript

来源：https://stackoverflow.com/questions/76329656/how-can-i-reset-the-counter-in-the-provided-code-after-7-days

1条答案

按热度按时间

js4nwp541#

1.您的内联代码无效，vars中不能包含-
1.运行时钟的app.js不会读取您试图设置的内容，因为它是一个IIFE，立即调用的函数表达式，因此它可以运行并且无法更改。
下面是可以更改的代码
要重置，请执行

clearInterval(tId)
var target_date = new Date("2023-06-10T10:00:00").getTime(); // change this date
setCountDown(target_date);

let tId; 
function setCountDown(target_date) {
  // set the date we're counting down to
  // variables for time units
  var days, hours, minutes, seconds;
  // update the tag with id "countdown" every 1 second
  tId = setInterval(function() {
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
    if (current_date < target_date) {
      // do some time calculations
      days = (parseInt(seconds_left / 86400) < 10) ? "0" + parseInt(seconds_left / 86400) : parseInt(seconds_left / 86400);
      seconds_left = seconds_left % 86400;

      hours = (parseInt(seconds_left / 3600) < 10) ? "0" + parseInt(seconds_left / 86400) : parseInt(seconds_left / 86400);
      seconds_left = seconds_left % 3600;

      minutes = (parseInt(seconds_left / 60) < 10) ? "0" + parseInt(seconds_left / 60) : parseInt(seconds_left / 60);
      seconds = (parseInt(seconds_left % 60) < 10) ? "0" + parseInt(seconds_left % 60) : parseInt(seconds_left % 60);
    } else {
      days = '00';
      hours = '00';
      minutes = '00';
      seconds = '00';
    }
    // format countdown string + set tag value
    $(".days .number").html(days);
    $(".hours .number").html(hours);
    $(".minutes .number").html(minutes);
    $(".seconds .number").html(seconds);
  }, 1000);
}
const initTime = () => {
  var target_date = new Date("2023-06-10T10:00:00").getTime();
setCountDown(target_date);
};
$(function() { initTime() });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="main-content">
  <div class="container shrinked">
    <h1 class="section-title center-aligned">We are preparing something new. <br> <span>Stay tuned!</span></h1>

    <div class="counter-wrap">
      <div class="counter days">
        <div class="number">0</div>
        <div class="caption">Days</div>
      </div>
      <!-- .counter -->
      <div class="counter hours">
        <div class="number">0</div>
        <div class="caption">Hours</div>
      </div>
      <!-- .counter -->
      <div class="counter minutes">
        <div class="number">0</div>
        <div class="caption">Minutes</div>
      </div>
      <!-- .counter -->
      <div class="counter seconds">
        <div class="number">0</div>
        <div class="caption">Seconds</div>
      </div>
      <!-- .counter -->
    </div>
    <!-- .counter-wrap -->

  </div>
  <!-- .container -->
</main>
<!-- .main-content -->

赞(0）回复(0）举报 2023-05-27

我来回答

javascript 如何在7天后重置所提供代码中的计数器？

1条答案

相关问题

热门标签

最新问答