JavaScript根据用户输入设置计时器

Question

I need help with trying to set a timer based on the user input through the value of a select - option in html. 我需要有关尝试通过HTML中的select - option值基于用户输入来设置计时器的帮助。 And then be able to count to 0 from that number. 然后可以从该数字计数到0。 I need help with finding a way to make the value of hours, minutes, seconds to decrement. 我需要帮助，以寻求减少小时，分钟，秒的值的方法。 I tried making it countdown from a certain time that I hard coded, but I need it to countdown from whatever the user input it. 我尝试从硬编码的某个时间开始将其倒数，但是无论用户输入什么内容，我都需要将其倒数。

 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>

Answer 1

Hi there ^_^ I had some fun getting this working. 嗨，^ _ ^我很高兴开始这项工作。 Firstly, you do need to attach change listeners to your selects so you can get the values. 首先，您确实需要将更改侦听器附加到您的选择上，以便获取值。 Then, you can set up your interval. 然后，您可以设置间隔。 Below is the code I used ( here is the fiddle too) 下面是我使用的代码（这也是小提琴）

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

Cheers! 干杯!

JavaScript根据用户输入设置计时器

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-02-12 21:05:25

JavaScript根据用户输入设置计时器

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-02-12 21:05:25

解决方案1
0 已采纳 2019-02-12 21:05:25