Запустите сценарий JavaScript, когда нажатие кнопки не работает - PullRequest
Новая
       8

Запустите сценарий JavaScript, когда нажатие кнопки не работает

0 голосов
/ 27 апреля 2018

У меня есть следующий скрипт. 

var time = document.getElementById("picker-dates").value;
time = time.split(':');
var date = new Date();
var countDownDate = date.setHours(time[0], time[1], time[2]);

function countdownTimeStart() {
var x = setInterval(function () {

    // set hours, minutes and seconds, decrease seconds
    var hours = time[0];
    var minutes = time[1];
    var seconds = time[2]--;

    // if seconds are negative, set them to 59 and reduce minutes
    if (time[2] == -1) {
        time[1]--;
        time[2] = 59
    }

    // if minutes are negative, set them to 59 and reduce hours
    if (time[1] == -1) {
        time[0]--;
        time[1] = 59
    }

    // Output the result in an element with id="demo"
    // add leading zero for seconds if seconds lower than 10
    if (seconds < 10) {
        document.getElementById("demo").innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
    } else {
        document.getElementById("demo").innerHTML = hours + ": " + minutes + ": " + seconds + " ";
    }


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

Итак, я хочу запустить этот скрипт при нажатии кнопки. Я пробовал как 

<button class="start" onclick="countdownTimeStart();">Start</button>

Но это не работает. Как я могу заставить это работать. Может кто-нибудь помочь мне решить эту проблему.

1 Ответ

0 голосов
/ 27 апреля 2018

Этот код аналогичен тому, который вы запрашивали вчера, за исключением того, что он запрашивает ввод часов, минут и секунд. Ссылка здесь: Таймер обратного отсчета JavaScript для часов, минут и секунд при нажатии кнопки запуска

У вас было несколько частей кода, отсутствовавших со вчерашнего дня, особенно часть, в которой вам нужно учитывать текущую дату (переменная сейчас ) и расстояние до таймера для перемещения (переменная расстояние ), теперь вычтите введенные часы, минуты и секунды.

Также ввод данных должен быть сделан после нажатия кнопки. Следовательно, код, в котором вы читаете значение из поля даты средства выбора ввода, перемещен в обработчик нажатия кнопки.

Для этого вот рабочий код

  1. HTML 

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div>Please enter the time in HH:MM:YY</div>
    <input type = "text" id = "picker-dates" />
    <p id="demo"></p>
    <button id="start" class="start" onclick="countdownTimeStart()">Start</button>
  </body>

</html>
  1. Сценарий 

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]); 

console.log(countDownDate);
  
  
var x = setInterval(function () {

    // set hours, minutes and seconds, decrease seconds
    var hours = time[0];
    var minutes = time[1];
    var seconds = time[2]--;

    // if seconds are negative, set them to 59 and reduce minutes
    if (time[2] == -1) {
        time[1]--;
        time[2] = 59
    }

    // if minutes are negative, set them to 59 and reduce hours
    if (time[1] == -1) {
        time[0]--;
        time[1] = 59
    }
    
    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    var distance = countDownDate - now;
    

    // Output the result in an element with id="demo"
    // add leading zero for seconds if seconds lower than 10
    if (seconds < 10) {
        document.getElementById("demo").innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
    } else {
        document.getElementById("demo").innerHTML = hours + ": " + minutes + ": " + seconds + " ";
    }


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

}

Рабочий план здесь: https://plnkr.co/edit/65UL4Tj2gGwpeWBfHbgy?p=preview

...