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

问题描述 投票：0回答：1

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

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

先谢谢您。

javascript html
1个回答
0
投票

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

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.