javascript - 计时器不倒计时-6ren

javascript - 计时器不倒计时

转载作者：行者123 更新时间：2023-11-30 10:57:40

28

4

我有一个倒计时时钟，它会发生变化，但除非您刷新页面，否则它似乎不会实时倒计时。我不熟悉 javascript，所以我从某个地方复制了这个，然后自己稍微编辑一下以适应我的需要。是否有什么我应该添加或格式错误导致倒计时不是实时的。

function updateTimeSpan() {
  var theSpan = document.getElementById('timeLeft');
  var d = new Date();
  var t = new Date();
  var ms;
  var s, m, h;

  // if it's after 5pm, set today to tomorrow    
  if (d.getHours() > 16) {
    d.setDate(d.getDate() + 1);
  }
  // get the next monday    
  while (d.getDay() != 1) {
    d.setDate(d.getDate() + 1);
  }
  // set the time    
  d.setHours(1665);
  d.setMinutes(33);
  d.setSeconds(27);
  // get the difference between right now and next monday    
  ms = d - t;
  // get the days between now and then    
  d = parseInt(ms / (1000 * 60 * 60 * 24));
  ms -= (d * 1000 * 60 * 60 * 24);
  // get hours    
  h = parseInt(ms / (1000 * 60 * 60));
  ms -= (h * 1000 * 60 * 60);
  // get minutes    
  m = parseInt(ms / (1000 * 60));
  ms -= (m * 1000 * 60);
  // get seconds    
  s = parseInt(ms / 1000);
  theSpan.innerHTML = d + ' DAYS | ' + h + ' HRS | ' + m + ' MINS | ' + s + ' SECS';
  setTimeout('updateTimeSpan()', 100);
}

onload = updateTimeSpan();

$(function() {

  $("h2")
    .wrapInner("<span>")

  $("h2 br")
    .before("<span class='spacer'>")
    .after("<span class='spacer'>");

});

.timer-header {
  position: absolute;
  left: 0;
  width: 100%;
}

.timer-header span {
  color: black;
  font: bold 24px/45px Montserrat, Sans-Serif;
  letter-spacing: -1px;
  font-size: 30px;
  padding: 10px;
}

.timer-header span.spacer {
  padding: 0 5px;
}

@media only screen and (max-width: 480px) {
  .timer-header span {
    color: black;
    font: bold 24px/45px Montserrat, Sans-Serif;
    font-size: 18px;
    padding: 5px;
  }
  .timer-header span.spacer {
    padding: 0 5px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <h2 class="timer-header"><span id="timeLeft"></span></h2>
</body>

最佳答案

试试这个

var countDownDate = new Date("Jan 5, 2020 00:00:00").getTime();


var x = setInterval(function() {

  var now = new Date().getTime();
    
  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);
    
  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 = "EXPIRED";
  }
}, 1000);

p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}

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

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

关于javascript - 计时器不倒计时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59362192/

28

4

0

文章推荐： ios - TableView header 中的 UISearchController 与其他项目重叠

文章推荐： java - 在构造函数中连接一个 bean 和一个值

jquery - 计时器？
我需要在文档就绪触发后 5 秒调用我的函数 abc()。这在 jQuery 中可能吗？ $(document).ready(function () { //Wait 5 seconds then
PowerShell 计时器/秒表准确性
我发现 System.Diagnostics.Stopwatch 类即使在很短的时间段(即 20 秒)内似乎也存在可测量的不准确性。对于编码为运行 20 秒的进程，我的进程显示耗时为 20.3+ 秒:
angular - 安排本地闹钟/计时器
我正在使用 Ionic Framework 使用 Angular 构建一个 Android/iPhone 食谱应用程序。功能之一应该是每个成分/步骤的警报/计时器。我猜 Ionic 是基于 Apa
具有不同图像的 Javascript 计时器
我有一个 JS 计时器脚本，从 20 秒开始倒计时 var count = 0; var speed = 1000; countdown = setInterval( function
Javascript 计时器，带停止按钮
我的 JavaScript 计时器有一个大问题。一切正常，除了 1 个按钮:停止!我不知道如何停止计数器上的所有内容(例如重置每个输入和计数器)。有什么想法可以解决这个问题吗？
Java 计时器 - 调用的函数未完成!
所以我有一个 TimerTask 任务在其 run() 中调用函数 onTimerComplete() onTimerComplete() 看起来像这样: private void onTimerC
java - 如何停止该线程内的线程/计时器？
我在 Eclipse 中的 windowbuilder 创建的 run() 方法中有计时器。我不知道如何通过另一种方法停止该计时器。例如通过添加 if(MenuWindow.gameStarted
按下按钮时的 Java 计时器
我对java很陌生，我试图在按下按钮时启动计时器，但无法启动它。我尝试了几行代码，但似乎没有任何效果。我已经声明了我的标签、文本字段和计时器: private JTextField JTFHours
当前实例上的 java 计时器
import java.util.Scanner; import java.util.Timer; import java.util.TimerTask; public class Boggle {
Javascript 计时器 - 检查还剩多长时间
我正在尝试在 JavaScript 中获取计时器的值，因此当计时器为零时它会显示不同的内容； var local_t = new Date(); local_t.setSeconds(local_t.
Jquery slider 计时器
我需要使用 jquery 为网站创建自定义 slider 。到目前为止，如果我单击按钮，我已经设法让它按照我想要的方式运行，但我想实现一个自动计时器，以便幻灯片在 5 秒后切换。这是我的 JS 代码
javascript - 个人最佳记分员/计时器
我正在制作一个计时器，记录点击“通过”按钮上的“确定”时的最长时间(个人最好成绩)。我似乎无法弄清楚如何让计数器回到 0，我确信有一种方法可以只用 2 个按钮(开始 + 通过)来完成。我希望计时器在我
当且仅当任务排队时防止关闭的 Java 计时器
我有一个 java.util.Timer 用于限制电子邮件发送(如果最近发送了状态电子邮件，那么现在不要发送，而是创建一个计时器任务以稍后发送任何新状态)。我想要的是确保最终发送所有排队的电子邮件，
用于在线考试的 Javascript 计时器
我已经建立了一个在线考试门户，允许学生使用网络浏览器在线参加考试。现在我还开发了计时器功能，用户必须在规定的时间范围内完成考试。我遇到的麻烦是，当我刷新页面时，计时器再次从新开始，例如 40 分钟。
java - 计时器 - 异步任务或线程
我想知道在一定时间内禁用按钮的最佳方法是什么。当用户使用其他按钮转到其他页面时，定时器不会被重置，按钮仍将被禁用。我读过很多关于异步任务、线程的不同方法。但是我非常不确定哪种方法最好。我希望计时器
android - 计时器 - 计时
我正在制作一个测验应用程序，我想在其中显示用户在玩游戏时所用的时间。它应该采用 HH:MM:SS 格式，从 00:00:00 开始，直到他选择答案。当用户每秒播放时，计时器应该每秒更新一次。另外，我想
服务中的 Android 计时器
您好，计划为该 Activity 开发 android 倒数计时器应用程序，当用户单击开始按钮时显示计时器倒计时并显示计时器倒计时，用户将转到剩余 Activity ，即使计时器在后台运行，如果用户单
数据库中的 PHP 计时器
我想知道是否有一种简单的方法可以使用 PHP 在数据库中创建计时器，我想在数据库中创建该行 30 分钟后将其删除。如果这不够具体，我很抱歉，但我不知道如何在其中提供更多细节，请随意发表评论，以便我可以
带对象的 Javascript 计时器
我试图制作一种与我的计时器一起使用的对象。问题是，当我只有裸函数(不在对象中)时，它就可以工作。但是当我把它放在对象内部时它不起作用。使用此代码我只能看到 00:01 当我只使用函数本身时，它工作正
带逗号的 JavaScript 计时器
这个问题已经有答案了: How to format numbers as currency strings (67 个回答) 已关闭 9 年前。我想显示从 1 到 2500 的美元计时器。当计时器增

首页

博学

6Ren·AI

商城

javascript - 计时器不倒计时