Question

在下面的代码中，我想创建一个文本输入字段（用于日期），以便将倒数计时器设置为该值并开始计数 - 例如在单击“确定”按钮之后。我真的不知道如何修改第一个变量才能做到这一点。

<script>
    // Set the date we're counting down to
    var countDownDate = new Date("May 25, 2018 11:30:00").getTime();
    // Update the count down every 1 second
    var x = setInterval(function() {
        // Get todays date and time
        var now = new Date().getTime();
        // Find the distance between now an the count down date
        var distance = countDownDate - now;
        // Time calculations for days, hours, minutes and seconds
        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);
        // Display the result in the element with id="demo"
        document.getElementById("demo").innerHTML = "Pozostało: </br>" + days + " Dni, </br>" + hours + "g : " + minutes + "m : " + seconds + "s";
        document.getElementById("demo").style.fontSize = "45px";
        document.getElementById("demo").style.fontWeight = "bold";
        document.getElementById("demo").style.color = "white";
        document.getElementById("demo").style.backgroundColor = "#4783bf";
        document.getElementById("demo").style.textAlign ="center"; 
        // If the count down is finished, write some text
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRED";
        }
    }, 1000);
</script>

感谢您的所有建议！

Answer 1

看看这个小提琴start timer on click of button

我已在文本框中输入此日期： - 2017年5月26日01:30:00

function startTimer(){
var dateEntered = document.getElementById("txtDate").value;
// Set the date we're counting down to
//May 26, 2017 01:30:00
var countDownDate = new Date(dateEntered).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
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);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = "Pozostało: </br>" + days + " Dni, </br>" + hours + "g : " + minutes + "m : " + seconds + "s";
document.getElementById("demo").style.fontSize = "45px";
document.getElementById("demo").style.fontWeight = "bold";
document.getElementById("demo").style.color = "white";
document.getElementById("demo").style.backgroundColor = "#4783bf";
document.getElementById("demo").style.textAlign ="center"; 
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
}

<input type="text" id="txtDate"/>
<br>
<input type="button" value="Calculate" onclick="startTimer();">
<div id="demo">

</div>

Answer 2

首先，您需要下载datetimepicker库。 https://plugins.jquery.com/datetimepicker/

然后，跟着这个。请记住更改css和jquery文件的路径。

<link href="~/css/jquery.datetimepicker.css" rel="stylesheet" />

<body>    
    <input type="text" id="datetimepicker" />
    <input type="button" value="Ok" id="btOk" />   
    <p id="demo" />
</body>

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/jquery.datetimepicker.min.js"></script>

<script type="text/javascript">      
        $('#datetimepicker').datetimepicker();

        $(document).ready(function () {

            $('#btOk').click(function () {

                var currentDate = $('#datetimepicker').val();

                var countDownDate = new Date(currentDate).getTime();                
                // Update the count down every 1 second
                var x = setInterval(function () {
                    // Get todays date and time
                    var now = new Date().getTime();
                    // Find the distance between now an the count down date
                    var distance = countDownDate - now;
                    // Time calculations for days, hours, minutes and seconds
                    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);
                    // Display the result in the element with id="demo"
                    document.getElementById("demo").innerHTML = "Pozostało: </br>" + days + " Dni, </br>" + hours + "g : " + minutes + "m : " + seconds + "s";
                    document.getElementById("demo").style.fontSize = "45px";
                    document.getElementById("demo").style.fontWeight = "bold";
                    document.getElementById("demo").style.color = "white";
                    document.getElementById("demo").style.backgroundColor = "#4783bf";
                    document.getElementById("demo").style.textAlign = "center";
                    // If the count down is finished, write some text
                    if (distance < 0) {
                        clearInterval(x);
                        document.getElementById("demo").innerHTML = "EXPIRED";
                    }
                }, 1000);
            });


        });
    </script>

在倒计时功能中执行来自文本输入的代码

2 个答案: