我如何让用户能够输入分钟数来更改倒计时时间？

Question

我希望能够让用户选择计时器应该倒计时多少分钟，我应该如何 change/add 这个脚本？顺便说一句，我以前没有 Javascript 方面的经验，我现在正在学习，所以请记住这一点！任何帮助深表感谢。这是一个应该倒数分钟的计时器，这是我在 html 和 css:

中所做的设计

我希望用户输入“工作时间”和“休息时间”，以便计时器倒计时工作时间，完成后自动倒计时休息时间并重复。正如我之前所说，这是我的第一个“js 项目”，因此非常需要和感谢任何帮助！

var countDownDate = new Date("Oct 16, 2021 20:37:25").getTime();

var x = setInterval(function() {

  var now = new Date().getTime();

  var distance = countDownDate - now;

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

  document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";

  }
}, 1000);
</script>

这是 HTML 到 select 分钟的表格：

<div class="formsss"><form action="."> <input type="number" value="1" class="TaskTime"/>Work Minutes</> <input type="number" value="1" class="BreakTime"/>Break Minutes</> <button type="submit" class="submitt">Save</button>

Answer 1

如@testing-22 所述，它取决于 html 代码，但我认为您需要这样的东西：

<html>
<head>
    
    <script>
        // we need some variables to store the work and break minutes (i prefer to store them by seconds)
        var workSeconds = 120, breakSeconds = 60;
        // and a referens to interval
        var xInterval;
    
        // start function
        function start() {          
            xInterval = setInterval(workCountDown, 1000);
        }
        // stop function
        function stop() {
            clearInterval(xInterval);
        }
        // reset function; calls stop, save which re-stores the values of user inputs and then starts again.
        function reset() {
            stop();
            save();
            start();
        }
        // save function that saves the values of user inputs
        function save() {
            workSeconds = parseInt(document.getElementById("txtWorkMinutes").value)*60;
            breakMinutes = parseInt(document.getElementById("txtBreakMinutes").value)*60;           
        }
        
        // working count down function
        function workCountDown() {
            // counting down work seconds
            workSeconds--;
            // showing work seconds in "0:0" format: 
            document.getElementById("timer").innerText = Math.floor((workSeconds / 60)).toString() + ":" + (workSeconds % 60).toString();
            
            // if workSeconds reaches to zero, stops the workInterval and starts the breakInterval:
            if (workSeconds == 0) {
                console.log("relaxing...");
                clearInterval(xInterval);
                xInterval = setInterval(breakCountDown, 1000);
            }
        }
        
        // breaking count down function
        function breakCountDown() {
            // counting down break seconds
            breakSeconds--;
            // showing break seconds in "0:0" format: 
            document.getElementById("timer").innerText = Math.floor((breakSeconds / 60)).toString() + ":" + (breakSeconds % 60).toString();
            
            // if breakSeconds reaches to zero, stops the breakInterval, resets the variables to initial values by calling save function and starts the workInterval again:
            if (breakSeconds == 0) {
                console.log("ready to work...");
                reset();
            }
        }
    </script>
    
</head>
<body>
    <span id="timer">00:00</span> 
    <br />
    
    <button onclick="start()">Start!</button>
    <button onclick="stop()">Stop!</button>
    <button onclick="reset()">Reset!</button>
    <br />
    
    <input type="text" id="txtWorkMinutes" value="2" /> <br />
    <span>Work Minutes</span>
    <br />
        
    <input type="text" id="txtBreakMinutes" value="1" /> <br />
    <span>Break Minutes</span>
    <br />
    
    <button onclick="save()">Save</button>
</body>
</html>

要按pad显示定时器，你可以看看Is there a JavaScript function that can pad a string to get to a determined length?

我如何让用户能够输入分钟数来更改倒计时时间？

How would i make users be able to input minutes to change the countdown time?

javascript

timer

user-input

countdown