Получить значение ввода текста Html в функцию Javascript

Question

Я создаю таймер обратного отсчета для выбранного пользователем времени. Для этого я разработал следующую функцию.

function countdownTimeStart(){

var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

var x = setInterval(function() {

    // Get to days 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 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);

    // Output the result in an element with id="demo"
    document.getElementById("demo1").innerHTML = hours + ": "
        + minutes + ": " + seconds + " ";

    // If the count down is over, write some text
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo1").innerHTML = "EXPIRED";
    }
}, 1000);
 }

Это отлично работает. Но я хочу получить выбранное пользователем значение из текстового ввода вместо var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

Например

<input type = "text" id = "picker-dates" value="08:30:20">

Так может кто-нибудь помочь мне получить это входное значение для моей функции JavaScript.

Answer 1

использовать jquery: $ ('# picker-date'). Val ()

Answer 2

Сначала получите значение времени из input, используя getElementById, а затем разделите это значение двоеточием :, чтобы получить часы, минуты и секунды. С этими значениями вы можете использовать setHours в текущей дате, чтобы установить время, указанное в input.

function countdownTimeStart(){
var time = document.getElementById("picker-dates").value;
time = time.split(':');
var date = new Date();
var countDownDate = date.setHours(time[0],time[1],time[2]);
var x = setInterval(function() {
    // Get to days 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 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);

    // Output the result in an element with id="demo"
    document.getElementById("demo1").innerHTML = hours + ": "
        + minutes + ": " + seconds + " ";

    // If the count down is over, write some text
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo1").innerHTML = "EXPIRED";
    }
  }, 1000);
}
 
 countdownTimeStart();

<input type = "text" id = "picker-dates" value="14:30:20">
<div id='demo1'></div>

Answer 3

Вы можете сделать это, пожалуйста, посмотрите, и если это не работает, пожалуйста, дайте мне знать.

var selectedValue = document.getElementById("picker-dates").value;