我正在尝试使用 HTML 和 Javascript 制作一个倒数计时器，它具有预设日期，但用户可以更改其日期

Question

我目前正在使用一个表单，以便用户可以更改计时器设置为倒计时的日期。 问题是当用户单击“提交”按钮时应该运行的 Javascript 函数正在运行，但即使我已经在表单的“日期”输入框中输入了一些内容，多次测试表明它没有t 表明我已经输入了任何东西。 我不明白我需要做什么。 这是我的代码：

<html>
<p id="demo"></p>
    <div class='form'>
        <form>
            enter any date here <br>
            <br>
            <input type="date" id="date"> <br>
            <br>
            <button onclick='countdown()' class="submitbutton">submit</button>
        </form>
    </div>
    <script>
        if (document.cookie=="[object HTMLInputElement]") {
            var countDownDate = new Date("10/17/2020").getTime();
        }
        else {
            var countDownDate = new Date(document.cookie).getTime();
        }
        var countDownDate = new Date("10/17/2020").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);
            document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        }, 1000);
    </script>
    <script>
        function countdown() {
            var date = document.getElementById("date");
            document.cookie = date;
            countDownDate = new Date("10/17/2020").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);
                document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
                if (distance < 0) {
                    clearInterval(x);
                    document.getElementById("demo").innerHTML = "the date you entered is before today";
                    }
            }, 1000);
        }
    </script>
</html>

先感谢您。

Answer 1

我认为您应该输入倒计时日期。 但当前代码不起作用。 他们在获取日期的部分有问题。 我修好了它。 请检查一下。

https://codepen.io/stargroup0075/pen/jOPdRPd

<html>
<p id="demo"></p>
    <div class='form'>
        <form>
            enter any date here <br>
            <br>
            <input type="date" id="date"> <br>
            <br>
            <button onclick='countdown()' class="submitbutton" type="button">submit</button>
        </form>
    </div>
    <script>
        if (document.cookie=="[object HTMLInputElement]") {
            var countDownDate = new Date("10/17/2020").getTime();
        }
        else {
            var countDownDate = new Date(document.cookie).getTime();
        }
        var countDownDate = new Date("10/17/2020").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);
            document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        }, 1000);
    </script>
    <script>
        function countdown() {
            var date = document.getElementById("date").value;
            document.cookie = date;
            countDownDate = new Date(date).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);
                document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
                if (distance < 0) {
                    clearInterval(x);
                    document.getElementById("demo").innerHTML = "the date you entered is before today";
                    }
            }, 1000);
        }
    </script>
</html>

我正在尝试使用 HTML 和 Javascript 制作一个倒数计时器，它具有预设日期，但用户可以更改其日期

问题描述

1 个解决方案

解决方案1
0 已采纳

我正在尝试使用 HTML 和 Javascript 制作一个倒数计时器，它具有预设日期，但用户可以更改其日期

问题描述

1 个解决方案

解决方案1 0 已采纳

解决方案1
0 已采纳