动态 JavaScript 时间计数器

Question

我正在尝试在 JavaScript 中创建一个动态时间计数器/计时器。

为什么是动态的？如果时间戳足够大以显示天或小时等，我想显示天/小时/分钟/秒。

如果时间戳少于一天，我希望脚本只动态显示小时数。

1D 0H 59M 59S
23H 59M 59S
59M 59S
59S
MESSAGE

这是我试图让它工作的代码。

<center>
<script>
    var countDownDate = new Date("2017-11-17T20:10:30Z").getTime();
    var x = setInterval(function() {
        var now = new Date().getTime();
        var distance = countDownDate - now;

        // Seconds
        if (distance < 1000){
            document.getElementById("count1").innerHTML = seconds + "s ";
        }
        // Minutes
        if (distance < 60000){
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            document.getElementById("count1").innerHTML = minutes + "m " + seconds + "s ";
        }
        // Hours
        if (distance < 3600000){
            var hours = Math.floor(distance / (1000 * 60 * 60 * 1));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            document.getElementById("count1").innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
        }
        // Days
        if(distance > 3600001){
            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("count1").innerHTML = days + "d " + hours + "h " + minutes + "m " $
        }

        if (distance < 0) {
            clearInterval(x);
            document.getElementById("count1").innerHTML = "You will be redirected now";
        }
    }, 1000);
</script>

<p id="count1"></p>
</center>

我认为我的问题与以毫秒为单位的数学混淆有关，但我无法找出问题所在。

Answer 1

这是整个脚本的工作顺序，以防其他人需要它：

整个脚本旨在通过更改 $FD['id'] 数组变量中的 ID 并复制粘贴打印/回显函数内容的函数，在单个页面中多次重复使用。

PHP 函数包含文件（count.php）：

<?php
// JS Date format
// 2017-11-14T12:00:00Z

function counter($FD){
$date=$FD['date'];
$id=$FD['id'];
$display_start_1=$FD['display_start_1'];
$display_start_2=$FD['display_start_2'];
$display_end=$FD['display_end'];

echo $counter=<<<a
<center>
<script>

var countDownDate$id = new Date("$date").getTime();
var x$id = setInterval(function () {
        var now$id = new Date().getTime();
        var distance$id = countDownDate$id - now$id;

        var days$id = Math.floor(distance$id / (1000 * 60 * 60 * 24));
        var hours$id = Math.floor((distance$id % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes$id = Math.floor((distance$id % (1000 * 60 * 60)) / (1000 * 60));
        var seconds$id = Math.floor((distance$id % (1000 * 60)) / 1000);

        // Seconds
        if (distance$id <= 60000) {
                document.getElementById("count$id").innerHTML ="$display_start_1 " + seconds$id + "s " + " $display_start_2";
        }
        // Minutes
        else if (distance$id <= 3600000) {
                document.getElementById("count$id").innerHTML ="$display_start " + minutes$id + "m " + seconds$id + "s " + " $display_start_2";
        }
        // Hours
        else if (distance$id <= 86400000) {
                document.getElementById("count$id").innerHTML ="$display_start_1 " + hours$id + "h " + minutes$id + "m " + seconds$id + "s " + " $display_start_2";
        }
        // Days
        else if (distance$id > 86400000) {
                document.getElementById("count$id").innerHTML ="$display_start_1 " + days$id + "d " + hours$id + "h " + minutes$id + "m " + seconds$id + "s " + " $display_start_2";
        }
        if (distance$id < 0) {
                clearInterval(x$id);
                document.getElementById("count$id").innerHTML = "$display_end";
        }
}, 1000);
</script>
<p id="count$id"></p>
a;
}
?>

PHP 显示文件（count_display.php）：

<?php
$now = time();
// Simulation of utc time (-1 hour +1 minute)
// By modifying the amount of seconds you set/define the amount of seconds that will counted down
$timestamp_new=$now-3600+10;
// Time formattig for JavaScript code
$date_new=date('Y-m-d\TH:i:s\Z', $timestamp_new);

// Include the function file once only
include'count.php';

// Define variables for the first counter
$FD1['date']="$date_new";
$FD1['id']='1';
$FD1['display_start_1']="Please wait for another:<br >";
$FD1['display_start_2']="<br />We are preparing your playground for you.";
$FD1['display_end']="Your Playground is ready at:<br /><a href='http://555.555.555.555'>Game server 01</a>";
counter($FD1);

// Define variables for the second counter 
$timestamp_new=$now-3600+15;
$date_new=date('Y-m-d\TH:i:s\Z', $timestamp_new);

// The second count down timer
$FD2['date']="$date_new";
$FD2['id']='2';
$FD2['display_start_1']="Please wait for another:<br >";
$FD2['display_start_2']="<br />We are preparing your playground for you.";
$FD2['display_end']="Your Playground is ready at:<br /><a href='http://100.100.100.100'>Game server 02</a>";
counter($FD2);

// And so on ....

?>

希望这会为其他人节省大量时间；） 有一个美好的生活（你可以并且知道如何）;）

Answer 2

这些更改使它对我有用：

      <center>
<script>

    var countDownDate = new Date("2017-11-17T21:30:30Z").getTime();
    var x = setInterval(function () {
        var now = new Date().getTime();
        var distance = countDownDate - now;

        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);

        // Seconds
        if (distance <= 60000) {
            document.getElementById("count1").innerHTML = seconds + "s ";
        }
        // Minutes
        else if (distance <= 3600000) {
            document.getElementById("count1").innerHTML = minutes + "m " + seconds + "s ";
        }
        // Hours
        else if (distance <= 86400000) {
            document.getElementById("count1").innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
        }
        // Days
        else if (distance > 86400000) {
            document.getElementById("count1").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        }

        if (distance < 0) {
            clearInterval(x);
            document.getElementById("count1").innerHTML = "You will be redirected now";
        }
    }, 1000);
</script>

<p id="count1"></p>

我相应地改变了毫秒，在你的日子里你有一个“$”所以我改变了。

我改变了日期，得到了我认为你想要的效果。

Answer 3

看起来您正在以绝对最难的方式做到这一点，并且也在重新发明轮子。有很多很好的关于内置 javascript 函数的参考资料（例如 MDN），你应该好好看看。

如果您将此作为一项智力练习，请考虑将您的代码重组为类似这样的内容（显然只是伪代码）：

let dateHTML = "";
if (time1.seconds - time2.seconds > 0) {
    dateHTML = (time1.seconds - time2.seconds) + "s";
}
if (time1.minutes-time2.minutes > 0) {
    dateHTML = (time1.minutes-time2.minutes) + "m " + dateHTML;
}
//So on and so forth for the maximum interval you want to account for.
document.getElementById("count1").innerHTML = dateHTML;

您可能会非常聪明地使用空运算符，将时间单位距离放入一个数组中以清理语法并避免进行两次计算等，但这应该会大大减少您正在做的事情。

请记住，有一些 JS 库可以很好地完成这类事情，所以如果您正在从事“真正的”项目，请考虑一下。