從倒計時函數中的文本輸入執行代碼

在下面的代碼中，我想創建一個文本輸入字段（用於日期），該字段被執行以便倒數計時器設置爲該值並開始計數 - 例如，單擊「確定「按鈕。我真的不知道如何修改第一個變量才能做到這一點。從倒計時函數中的文本輸入執行代碼

<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

從倒計時函數中的文本輸入執行代碼

回答

相關問題