从倒计时函数中的文本输入执行代码

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

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

谢谢你的所有建议！

来源

2017-05-25 kub4w0

据我所知，你想添加一个输入日期字段。点击确定按钮后，它会显示不同的时间，对吧？ – Tomato32

你好，确切地说，在点击OK后输入的数据字段执行执行日期并从该日期开始倒计时。 – kub4w0

您使用Datetimepicker或只是输入字段与特定的格式？ – Tomato32

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

我在文本框中输入此日期 - 5月26日，2017年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>

来源

2017-05-25 07:55:02 Lalit

首先，你需要下载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>

来源

2017-05-26 09:38:21 Tomato32

您能否快速解释如何设置此库并更改路径？ – kub4w0

@ kub4w0：哦，这很简单。首先，你需要下载图书馆。解压并将jquery.datetimepicker.css和jquery.datetimepicker.min.js文件复制到要放置的文件夹中。然后，设置具体路径。完成！ – Tomato32

@ kub4w0：您可以访问这些链接以引用，我的朋友：https：//www.w3schools.com/css/css_howto.asp和https://www.w3schools.com/js/js_whereto.asp – Tomato32

从倒计时函数中的文本输入执行代码

回答

相关问题