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

这些变化使它对我有用：

      <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 2

看起来你是以尽可能绝对最难的方式做到这一点，并重新发明轮子。内置的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;

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

请记住，有一些JS库可以很好地完成这些操作，所以如果你正在使用真正的＆＃34;真实的＆＃34;项目考虑到了。

Answer 3

以下是其他人需要的整个脚本：

通过更改$ FD [＆＃39; id＆＃39;]数组变量中的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 ....

?>

希望这会为其他人节省大量时间;）拥有美好的生活（你能够并且知道如何）;）

动态JavaScript时间计数器

3 个答案: