英文:
How can I reset the counter in the provided code after 7 days?
问题
我已经创建了一个“即将推出”的页面，但我在理解如何在提供的代码中在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>
<div class="counter hours">
<div class="number">24</div>
<div class="caption">Hours</div>
</div>
<div class="counter minutes">
<div class="number">43</div>
<div class="caption">Minutes</div>
</div>
<div class="counter seconds">
<div class="number">38</div>
<div class="caption">Seconds</div>
</div>
</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代码，我将尽力协助你。
英文:
I have created a "Coming Soon" page, but I'm having trouble understanding how to reset the counter in the provided code after 7 days. Can you please guide me on how to achieve this?
There are few other CSS and js files ,do I need to share them ?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案1
得分: 1
-
你的内联代码无效，变量名中不能包含连字符“-”。
-
运行时钟的 app.js 不会读取你尝试设置的内容，因为它是一个立即调用的函数表达式（IIFE），所以它运行后不能被更改。
以下是可以更改的代码：
要重置，请执行以下操作：
clearInterval(tId);
var target_date = new Date("2023-06-10T10:00:00").getTime(); // 更改此日期
setCountDown(target_date);
let tId;
function setCountDown(target_date) {
// 设置我们要倒计时的日期
// 时间单位的变量
var days, hours, minutes, seconds;
// 每隔1秒更新具有ID "countdown" 的标签
tId = setInterval(function() {
// 找到现在和目标之间的“秒数”数量
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
if (current_date < target_date) {
// 进行一些时间计算
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';
}
// 格式化倒计时字符串 + 设置标签值
$(".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">我们正在准备一些新东西。<br> <span>敬请期待！</span></h1>
<div class="counter-wrap">
<div class="counter days">
<div class="number">0</div>
<div class="caption">天</div>
</div>
<!-- .counter -->
<div class="counter hours">
<div class="number">0</div>
<div class="caption">小时</div>
</div>
<!-- .counter -->
<div class="counter minutes">
<div class="number">0</div>
<div class="caption">分钟</div>
</div>
<!-- .counter -->
<div class="counter seconds">
<div class="number">0</div>
<div class="caption">秒钟</div>
</div>
<!-- .counter -->
</div>
<!-- .counter-wrap -->
</div>
<!-- .container -->
</main>
<!-- .main-content -->
英文:
- Your inline code is invalid, vars cannot have
-in them - Your app.js which is running the clock does not read what you try to set since it is an IIFE, Immediately Invoked Function Expression so it runs and cannot be changed.
Here is code that can be changed
To reset, do
clearInterval(tId)
var target_date = new Date("2023-06-10T10:00:00").getTime(); // change this date
setCountDown(target_date);
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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() });
<!-- language: lang-html -->
<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 -->
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论