如何将用户输入的时间从分钟切换到一小时？答案

【问题标题】：How to switch the user input of time from minutes to an hour?如何将用户输入的时间从分钟切换到一小时？
【发布时间】：2014-03-20 13:54:01
【问题描述】：

我正在尝试创建一个倒计时计时器，如果用户输入 1 或 2 小时，如果用户输入 2，则从一个小时开始倒计时，等等。我知道我需要将我从用户那里获得的值乘以 60为了从输入计算分钟和秒切换到按小时计算，但我不太确定在哪里这样做。

   <script>
    function startTimer() {
      userInput = document.getElementById('userTime').value;
        if(userInput.length == 0){
        alert("Please enter a value");
        } else {
        var numericExpression = /^[0-9]+$/;
        if(!userInput.match(numericExpression)){
        alert("Please enter a number")
        } else {

       function display( notifier, str ) {
        document.getElementById(notifier).innerHTML = str;
      }

      function toMinuteAndSecond( x ) {
        return Math.floor(x/60) + ":" + x%60;
      }

      function setTimer( remain, actions ) {
        (function countdown() {
           display("countdown", toMinuteAndSecond(remain));         
           actions[remain] && actions[remain]();
           (remain -= 1) >= 0 && setTimeout(arguments.callee, 1000);
        })();
      }

      setTimer(userInput, {
        10: function () { display("notifier", "Warning message 1",    document.bgColor="#ffff00"); },
         5: function () { display("notifier", "Warning message 2", document.bgColor="#ff69b4");        },
         0: function () { display("notifier", "Final message", document.bgColor="#ff0000");       }
      }); 
    }  
    }
    }

    </script>

    <div id="countdown"></div>
    <div id="notifier"></div>
    <p>
    Please Enter A Time Limit for the Meeting: <input type="text" id="userTime" />
    <input type="button" value="Go" onclick="startTimer()" />
    </p>

【问题讨论】：

标签： javascript timer countdown

【解决方案1】：

您真正需要更改的是您的 toMinuteAndSecond 函数，我已将其重命名并在下面完成：

userInput = document.getElementById('userTime').value;
if (userInput.length == 0) {
    alert("Please enter a value");
} else {
    var numericExpression = /^[0-9]+$/;
    if (!userInput.match(numericExpression)) {
        alert("Please enter a number")
    } else {

        function display(notifier, str) {
            document.getElementById(notifier).innerHTML = str;
        }

        function toFormattedHHMMSS(x) {
            var hours = parseInt(x / 3600);
            var minutes = parseInt(x / 60) % 60;
            var seconds = x % 60;

            return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
        }

        function setTimer(remain, actions) {
            (function countdown() {
                display("countdown", toFormattedHHMMSS(remain));
                actions[remain] && actions[remain]();
                (remain -= 1) >= 0 && setTimeout(arguments.callee, 1000);
            })();
        }

        setTimer(userInput, {
            10: function () {
                display("notifier", "Warning message 1", document.bgColor = "#ffff00");
            },
            5: function () {
                display("notifier", "Warning message 2", document.bgColor = "#ff69b4");
            },
            0: function () {
                display("notifier", "Final message", document.bgColor = "#ff0000");
            }
        });
    }
}

对于允许几天或几周等，也会这样做......

【讨论】：

这让我更接近 - 非常感谢瑞恩！但是，我想这样做，如果用户在输入字段中输入 1，它将在计时器上将其转换为 60 分钟。用户仍然需要以秒为单位输入他们想要的时间量。
@user3440038 哦，我明白了，在第二个 else 语句中只需执行 userInput = userInput * 60;这样我们就已经确定输入了一个值，而且它是一个数字。
天哪！它正在按照我想要的方式工作！你的建议奏效了——你摇滚！！非常感谢，非常感谢。非常感谢。

【解决方案2】：

似乎分配了比简单倒计时更多的代码。当然，我不知道您实现的更广泛的方面，但我非常喜欢直截了当并降低代码的复杂性。

一个简单的起点是您可以减少所有这些：

if (userInput.length == 0) {
    alert("Please enter a value");
} else {
    var numericExpression = /^[0-9]+$/;
    if (!userInput.match(numericExpression)) {
        alert("Please enter a number")
    } else {

到这里：

if ((+userInput > 0) !== true) {alert("Please enter a valid time"); return;}

下面是一个将整个内容删减的示例：

<script>
    function startTimer() {
        var t = document.getElementById('userTime').value;
        if ((+t > 0) !== true) {alert("Please enter a valid time in hours"); return;}
        t = parseFloat(t, 10) * 3600; //convert hours & fractions of hours to seconds
        countDown(t);
    }

    function countDown(t) {
        if ((t - 1) > 0) setTimeout(function(){countDown(t - 1); }, 1000);
        printTime(t-1);
    }

    function printTime(t) {
        var e = document.getElementById("countdown");
        e.innerHTML = (t == 0) ? "Times up!" : Math.floor(t / 60) + ":" + t % 60;
        e.style.color = (t < 300) ? "#ff0" : (t < 600) ? "#ff69b4" : "#000";
    }
</script>

现在要构建更好的格式、更多的用户消息、警告等，您只需要使用 printTime(t) 函数。

【讨论】：