JavaScript установил таймер на основе пользовательского ввода - PullRequest
Новая
       1

JavaScript установил таймер на основе пользовательского ввода

0 голосов
/ 12 февраля 2019

Мне нужна помощь с попыткой установить таймер на основе ввода пользователя через значение select - option в html.И тогда сможете сосчитать до 0 с этого числа.Мне нужна помощь в поиске способа уменьшить значение часов, минут, секунд.Я пытался сделать обратный отсчет с определенного времени, которое я жестко запрограммировал, но мне нужно, чтобы он вел обратный отсчет от того, что пользователь ввел. 

var now = new Date();

var x = setInterval(function () {

	var hours = parseInt(document.getElementById("hours").value);
	var minutes = parseInt(document.getElementById("minutes").value);
	var seconds = parseInt(document.getElementById("seconds").value);

	var hDistance = hours - now.getHours();
	var mDistance = minutes - now.getMinutes();
	var sDistance = seconds - now.getSeconds();

	Math.floor((hDistance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
	Math.floor((mDistance % (1000 * 60 * 60)) / (1000 * 60));
	Math.floor((sDistance % (1000 * 60)) / 1000);

	document.getElementById("timer").innerHTML = hours + " : " +
		minutes + " : " + seconds;

}, 1000);
<div class="timer-display">

	<p id="timer"></p>
</div>

<body>

	<div class="main">
		&nbsp;&nbsp;&nbsp;&nbsp;
		<label for="hours">Hours</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<label for="minutes">Minutes</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<label for="seconds">Seconds</label>&nbsp;

		<br>

		<select name="hours" id="hours">
			<option value="0">0</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
			<option value="20">20</option>
			<option value="21">21</option>
			<option value="22">22</option>
			<option value="23">23</option>
		</select>

		<select name="minutes" id="minutes">
			<option value="0">0</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
			<option value="20">20</option>
			<option value="21">21</option>
			<option value="22">22</option>
			<option value="24">24</option>
			<option value="25">25</option>
			<option value="26">26</option>
			<option value="27">27</option>
			<option value="28">28</option>
			<option value="29">29</option>
			<option value="30">30</option>
			<option value="31">31</option>
			<option value="32">32</option>
			<option value="33">33</option>
			<option value="34">34</option>
			<option value="35">35</option>
			<option value="36">36</option>
			<option value="37">37</option>
			<option value="38">38</option>
			<option value="39">39</option>
			<option value="40">40</option>
			<option value="41">41</option>
			<option value="42">42</option>
			<option value="43">43</option>
			<option value="44">44</option>
			<option value="45">45</option>
			<option value="46">46</option>
			<option value="47">47</option>
			<option value="48">48</option>
			<option value="49">49</option>
			<option value="50">50</option>
			<option value="51">51</option>
			<option value="52">52</option>
			<option value="53">53</option>
			<option value="54">54</option>
			<option value="55">55</option>
			<option value="56">56</option>
			<option value="57">57</option>
			<option value="58">58</option>
			<option value="59">59</option>
		</select>

		<select name="seconds" id="seconds">
			<option value="0">0</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
			<option value="20">20</option>
			<option value="21">21</option>
			<option value="22">22</option>
			<option value="24">24</option>
			<option value="25">25</option>
			<option value="26">26</option>
			<option value="27">27</option>
			<option value="28">28</option>
			<option value="29">29</option>
			<option value="30">30</option>
			<option value="31">31</option>
			<option value="32">32</option>
			<option value="33">33</option>
			<option value="34">34</option>
			<option value="35">35</option>
			<option value="36">36</option>
			<option value="37">37</option>
			<option value="38">38</option>
			<option value="39">39</option>
			<option value="40">40</option>
			<option value="41">41</option>
			<option value="42">42</option>
			<option value="43">43</option>
			<option value="44">44</option>
			<option value="45">45</option>
			<option value="46">46</option>
			<option value="47">47</option>
			<option value="48">48</option>
			<option value="49">49</option>
			<option value="50">50</option>
			<option value="51">51</option>
			<option value="52">52</option>
			<option value="53">53</option>
			<option value="54">54</option>
			<option value="55">55</option>
			<option value="56">56</option>
			<option value="57">57</option>
			<option value="58">58</option>
			<option value="59">59</option>
		</select><br>

		<button class="start-timer" id="startTimer">Start Timer</button>


	</div>

1 Ответ

0 голосов
/ 13 февраля 2019

Привет ^ _ ^ Я получал удовольствие, получая эту работу.Во-первых, вам нужно прикрепить прослушиватели изменений к вашим выборам, чтобы вы могли получить значения.Затем вы можете установить свой интервал.Ниже приведен код, который я использовал ( здесь тоже скрипка) 

var hours = 0;
var minutes = 0;
var seconds = 0;
var interval = null;

document.getElementById('hours').addEventListener('change', e => {
    hours = +e.target.value;
});

document.getElementById('minutes').addEventListener('change', e => {
    minutes = +e.target.value;
});

document.getElementById('seconds').addEventListener('change', e => {
    seconds = +e.target.value;
});

document.getElementById('startTimer').addEventListener('click', () => {
    var timeInSeconds = (hours * 60 * 60) +
        (minutes * 60) +
        seconds;

    var displayTime = () => {
        var displayHours = Math.floor(timeInSeconds / (60 * 60));
        var remainder = timeInSeconds - (displayHours * 60 * 60);
        var displayMinutes = Math.floor(remainder / 60);
        var displaySeconds = remainder - (displayMinutes * 60);
        document.getElementById("timer").innerHTML = displayHours + " : " + displayMinutes + " : " + displaySeconds;
    };
    interval = setInterval(() => {
        displayTime();
        timeInSeconds -= 1;
        if (timeInSeconds < 0) {
            clearInterval(interval);
        }
    }, 1000);
});

Ура!

...