创建自定义倒数计时器

Question

I'm a graphic designer who has also been tasked with building a website for the church that I work for.我是一名平面设计师，还负责为我工作的教会建立一个网站。 I've built many websites in the past, so this isn't an issue at all, however, something that I'm looking to do with this site is to have as many elements that can just simply run on their own as possible.我过去建立了很多网站，所以这根本不是问题，但是，我希望通过这个网站做的事情是拥有尽可能多的元素，这些元素可以简单地独立运行。 I'm a complete beginner when it comes to JavaScript, and honestly don't really have an idea at all about what I'm doing.说到 JavaScript，我是一个完整的初学者，老实说，我对自己在做什么完全没有概念。

I'd like for the new site to have a custom countdown timer that will count down to when we go live, and then display a link for our live stream for a set period of time, and then reset.我希望新网站有一个自定义倒数计时器，它会倒计时到我们上线的时间，然后在设定的时间段内显示我们的直播流的链接，然后重置。 The code below shows what I've already managed to write from just searching around on the internet.下面的代码显示了我已经设法通过在互联网上搜索来编写的内容。 The problem with it is that it relies on a person (which half of the time is a web-volunteer) to remember to change the date and time to the next service after the current service is finished, and 90% of the time they forget.它的问题在于它依赖于一个人（其中一半时间是网络志愿者）记住在当前服务完成后将日期和时间更改为下一个服务，而 90% 的时间他们忘记了.

In a perfect world, I'd like for this countdown timer to automatically countdown to the nearest Tuesday at 6:00 pm, then show a link to our live stream for 20 minutes, then reset.在一个完美的世界中，我希望这个倒数计时器在 6:00 pm 自动倒计时到最近的星期二，然后显示指向我们直播的链接 20 分钟，然后重置。 Or if Sunday at 10:00 am comes first, countdown to Sunday at 10am, then show a link to our live stream for one hour and 15 minutes, and then reset.或者，如果周日上午 10:00 先到，则周日上午 10 点倒计时，然后显示指向我们直播的链接 1 小时 15 分钟，然后重置。 Theoretically I would imagine this could run indefinitely as it would just check for if Tuesday at 6pm comes first, or if Sunday at 10am comes first, then countdown to those times, pause, show some hyperlinked text, and then repeat.从理论上讲，我认为这可以无限期地运行，因为它只会检查是星期二下午 6 点先到，还是星期天上午 10 点先到，然后倒计时，暂停，显示一些超链接文本，然后重复。

I apologize if this has already been talked about here, I tried searching as thoroughly as I could and couldn't find anything.如果这里已经讨论过这一点，我深表歉意，我尝试尽可能彻底地搜索，但找不到任何东西。

Any help at all would be greatly appreciated.任何帮助都将不胜感激。

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<p id="demo" class="countdown-live" style="text-align:center;"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("October 20, 2020 18: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 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);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + " d " + hours + " h "
  + minutes + " m & " + seconds + " s";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = '<a href="https://newhopechurchtn.org/new-hope-online">Watch Live!</a>';
  }
}, 1000);
</script>

</body>
</html>

Answer 1

This is a little delayed but here's something that works with a little maintenance.这有点延迟，但这里有一些需要一点维护的东西。

 (() => { var currentDate = new Date(); currentDate = currentDate.toLocaleString("en-US", { timeZone: "America/New_York" }); // Service times var serviceTEN = "2021/12/06 11:15"; var serviceTWELVE = "2021/12/06 13:45"; var serviceTWO = "2021/12/06 15:45"; var serviceFIVE = "2021/12/06 16:45"; var serviceSEVEN = "2021/12/06 19:45"; var waiting; // Set current service var currentService = serviceTEN; function pad(num, size) { var s = "0" + num; return s.substr(s.length - size); } // Get the current time, set the correct timezone, and parse it to the same layout. // Find the difference between the current date and the service time. // Have that be the time remaining. function getTimeRemaining(endtime) { var now = new Date(); now = now.toLocaleString("en-US", { timeZone: "America/New_York" }); // Parse the date to find each variable (seconds, minutes, hours, days) let t = Date.parse(endtime) - Date.parse(now); let seconds = Math.floor((t / 1000) % 60); let minutes = Math.floor((t / 1000 / 60) % 60); let hours = Math.floor((t / (1000 * 60 * 60)) % 24); let days = Math.floor(t / (1000 * 60 * 60 * 24)); return { total: t, days: days, hours: hours, minutes: minutes, seconds: seconds, }; } // the id refers to "js-clock" which is the beginning of the ID, this can be changed function clock(id, endtime) { let days = document.getElementById(id + "-days"); let hours = document.getElementById(id + "-hours"); let minutes = document.getElementById(id + "-minutes"); let seconds = document.getElementById(id + "-seconds"); let timeinterval = setInterval(function() { let t = getTimeRemaining(endtime); // Look through the service times and figure out which service it should be. if (t.total <= 0) { if (waiting === true) { location.reload(); } else if (t.total < -300000) { switch (endtime) { case serviceTEN: endtime = serviceTWELVE; break; case serviceTWELVE: endtime = serviceTWO; break; case serviceTWO: endtime = serviceFIVE; break; case serviceFIVE: endtime = serviceSEVEN; break; default: break; } } else { clearInterval(timeinterval); } } else { waiting = true; // Edit the 2 or 3 to change amount of digits days.innerHTML = pad(t.days, 3); hours.innerHTML = pad(t.hours, 2); minutes.innerHTML = pad(t.minutes, 2); seconds.innerHTML = pad(t.seconds, 2); } }, 1000); } clock("js-clock", currentService); })();

 <div class="mainOverlayCountdown-k" id="mainOverlayCountdownID-k"> <h1 id="countdownHeader-k">Next service begins in:</h1> <div class="countdown-cover"> <div id="js-clock" class="countdowntimer"> <div id="js-clock-days" class="clock-number">00</div> <div class="clock-label">Days</div> <div id="js-clock-hours" class="clock-number">00</div> <div class="clock-label">Hrs</div> <div id="js-clock-minutes" class="clock-number">00</div> <div class="clock-label">Min</div> <div id="js-clock-seconds" class="clock-number">00</div> <div class="clock-label">Sec</div> </div> </div> </div>

To change the service times, edit the service'TIME' Variables.要更改服务时间，请编辑服务“时间”变量。 You might have to play around with it to get the correct timezone.您可能需要使用它来获得正确的时区。

to add/delete service times, but make sure you also add/delete it in the variables where you set the date, and the switch function.添加/删除服务时间，但请确保您还在设置日期的变量和开关功能中添加/删除它。

Hope this helps!希望这可以帮助！

Answer 2

JAVASCRIPT CSS HTML Code: JAVASCRIPT CSS HTML 代码：

 <script> // Set the date we're counting down to // you can set according your own need var countDownDate = new Date("Jan 1, 2022 15:37:25").getTime(); // Update the count down 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); // Output the result in an element with id="demo" document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "Wait Is Over"; } }, 1000); </script> CSS part

 <style> p { text-align: center; font-size: 60px; margin-top: 0px; } </style> HTML part

 <p id="demo"></p>

创建自定义倒数计时器

问题描述

2 个解决方案

解决方案1
0 2020-12-03 20:59:26

解决方案2
0 2021-04-29 07:11:01

创建自定义倒数计时器

问题描述

2 个解决方案

解决方案1 0 2020-12-03 20:59:26

解决方案2 0 2021-04-29 07:11:01

解决方案1
0 2020-12-03 20:59:26

解决方案2
0 2021-04-29 07:11:01