时间戳

首页 > 解决方案 > 倒计时功能在超时块中无法正常工作

javascript - 倒计时功能在超时块中无法正常工作

问题描述

我无法让第二个倒计时功能在第一个 Snippet 中正常工作。我启动了 cdtd(); 第二次。两者都 cdtd(); 函数不会发生冲突，并且位于匿名函数内部。当我启动 cdtd(); 我第一次得到一个工作倒计时计时器，直到 16:00:00。当我第二次启动它时，我将在 17:00:00 之前获得工作倒计时。这是这个问题的实际用例。

只是为了制作一个示例流程，我制作了第二个片段。两者都 cdtd(); 确实相互碰撞，但第二个 cdtd(); 函数调用将返回一个工作倒计时计时器。现在我仍然不知道为什么它在第一个片段中不起作用。没有我使用的 timeOut 函数。

我不确定出了什么问题。有人有线索吗？

这是脚本。https://jsfiddle.net/3fq2j6a1/

我尝试在彼此下运行倒计时脚本并且有效，但我不需要它:)function cdtd() { .. }

这是一个片段：

// First session

var sessie1 = new Date();
var totsessie1 = new Date(sessie1.getFullYear(), sessie1.getMonth(), sessie1.getDate(), 14, 16, 0, 0) - sessie1;
if (totsessie1 < 0) {
  totsessie1 += 86400000; // it's after 10am, try 10am tomorrow.
}
setTimeout(function() {
  document.getElementById("test1").innerHTML = "Message.";


  // First countdown

  function cdtd() {
    var now = new Date();
    var dolazak = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 16, 0, 0);
    var timeDiff = dolazak.getTime() - now.getTime();
    if (timeDiff <= 0) {
      clearInterval(timer);
      document.getElementById(id).innerHTML = '';
    }
    //if(minutes < 2){document.getElementById(id).style.color="#ff0000";};
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    document.getElementById('time').innerHTML = " Still " + hours + " hours, " + minutes + " minutes and " + seconds + " seconds to go!";

    timer = setTimeout(cdtd, 1000);
  }

  cdtd();
  // End first countdown

}, totsessie1);

// Second session
var sessie2 = new Date();
var totsessie2 = new Date(sessie2.getFullYear(), sessie2.getMonth(), sessie2.getDate(), 14, 17, 0, 0) - sessie1;
if (totsessie2 < 0) {
  totsessie2 += 86400000; // it's after 10am, try 10am tomorrow.
}
setTimeout(function() {
  document.getElementById("test1").innerHTML = "Message.";


  // Second countdown

  function cdtd() {
    var now = new Date();
    var dolazak = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 17, 0, 0);
    var timeDiff = dolazak.getTime() - now.getTime();
    if (timeDiff <= 0) {
      clearInterval(timer);
      document.getElementById(id).innerHTML = '';
    }
    //if(minutes < 2){document.getElementById(id).style.color="#ff0000";};
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    document.getElementById('time').innerHTML = " Still " + hours + " hours, " + minutes + " minutes and " + seconds + " seconds to go!";

    timer = setTimeout(cdtd, 1000);
  }

  cdtd();
  // End second countdown

}, totsessie2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="test1">This is a paragraph.</p>
<span id="time"></span>

这是我在彼此下使用倒计时脚本时的代码片段。

function cdtd() {
  var now = new Date();
  var dolazak = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 15, 0, 0);
  var timeDiff = dolazak.getTime() - now.getTime();
  if (timeDiff <= 0) {
    clearInterval(timer);
    document.getElementById(id).innerHTML = '';
  }
  //if(minutes < 2){document.getElementById(id).style.color="#ff0000";};
  var seconds = Math.floor(timeDiff / 1000);
  var minutes = Math.floor(seconds / 60);
  var hours = Math.floor(minutes / 60);
  var days = Math.floor(hours / 24);
  hours %= 24;
  minutes %= 60;
  seconds %= 60;

  document.getElementById('time').innerHTML = " Still " + hours + " hours, " + minutes + " min and " + seconds + " seconds to go! (countdown to line 49)";

  timer = setTimeout(cdtd, 1000);
}

cdtd();

function cdtd() {
  var now = new Date();
  var dolazak = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 16, 0, 0);
  var timeDiff = dolazak.getTime() - now.getTime();
  if (timeDiff <= 0) {
    clearInterval(timer);
    document.getElementById(id).innerHTML = '';
  }
  //if(minutes < 2){document.getElementById(id).style.color="#ff0000";};
  var seconds = Math.floor(timeDiff / 1000);
  var minutes = Math.floor(seconds / 60);
  var hours = Math.floor(minutes / 60);
  var days = Math.floor(hours / 24);
  hours %= 24;
  minutes %= 60;
  seconds %= 60;

  document.getElementById('time').innerHTML = " Still " + hours + " hours, " + minutes + " min and " + seconds + " seconds to go! (countdown to line 49)";

  timer = setTimeout(cdtd, 1000);
}

cdtd();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="test1">This is a paragraph.</p>
<span id="time"></span>

https://jsfiddle.net/edfcLzhw/

但我需要它们在会话块内。这样做时，第二个倒数计时器会剩下不同的时间。totsessie1(); totsessie2();

倒计时脚本来自：Javascript countdown defined with hours

标签： javascripttimersettimeoutsetintervalcountdown

解决方案

我暂时解决了这个问题。我没有在 2 点上正确地编写代码。第一件事。我使用的函数 totsessie1() 也是第二个 totsessie1() 函数。我将第二个更改为 totsessie2()。我也没有使用 clearInterval(timer); 在运行第二个 cdtd();.

这是最终目标的工作片段：

// First session

var sessie1 = new Date();
var totsessie1 = new Date(sessie1.getFullYear(), sessie1.getMonth(), sessie1.getDate(), 15, 25, 0, 0) - sessie1;
if (totsessie1 < 0) {
  totsessie1 += 86400000; // it's after 10am, try 10am tomorrow.
}
setTimeout(function() {
  document.getElementById("test1").innerHTML = "Message.";


// First countdown

function cdtd() {
    var now = new Date();
    var dolazak = new Date(now.getFullYear(),now.getMonth(),now.getDate(),16,0,0);
    var timeDiff = dolazak.getTime() - now.getTime();
    if (timeDiff <= 0) {
        clearInterval(timer);
                document.getElementById(id).innerHTML = '';
    }
    //if(minutes < 2){document.getElementById(id).style.color="#ff0000";};
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    document.getElementById('time').innerHTML = " Still " + hours + " hours, " + minutes + " minutes and " + seconds + " seconds to go!";

    timer = setTimeout(cdtd, 1000);
}

cdtd();
// End first countdown

}, totsessie1);

// Second session
var sessie2 = new Date();
var totsessie2 = new Date(sessie2.getFullYear(), sessie2.getMonth(), sessie2.getDate(), 15, 26, 0, 0) - sessie2;
if (totsessie2 < 0) {
  totsessie2 += 86400000; // it's after 10am, try 10am tomorrow.
}
setTimeout(function() {
  document.getElementById("test1").innerHTML = "Message.";


// Second countdown

clearInterval(timer);
function cdtd() {
    var now = new Date();
    var dolazak = new Date(now.getFullYear(),now.getMonth(),now.getDate(),17,0,0);
    var timeDiff = dolazak.getTime() - now.getTime();
    if (timeDiff <= 0) {
        clearInterval(timer);
                document.getElementById(id).innerHTML = '';
    }
    //if(minutes < 2){document.getElementById(id).style.color="#ff0000";};
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    document.getElementById('time').innerHTML = " Still " + hours + " hours, " + minutes + " minutes and " + seconds + " seconds to go!";

    timer = setTimeout(cdtd, 1000);
}

cdtd();
// End second countdown

}, totsessie2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

<p id="test1">This is a paragraph.</p>
<span id="time"></span>

</body>
</html>

JSFiddle：https ://jsfiddle.net/nwvk8h12/

推荐阅读