javascript - 检查输入的时间值

标签 javascript regex range

我正在尝试创建一个数字验证，以便用户在计时器中输入的数字等于或小于 10:00:00。我创建了一个正则表达式函数来测试格式，但不知道如何将正则表达式测试与 if/else 范围语句结合起来。这是我创建的范围(测试输入是否为 09:59:99 或 10:00:00):

(((minutes >= 0 && minutes =< 9) && (seconds >= 0 && seconds =< 59) && (hundreths >= 0 && hundreths =< 99)) || ((minutes == 10) && (seconds == 00) && (hundreths == 00)))

JS 斌: http://jsbin.com/copoxelude/1/edit

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>User Input Timer</title>

</head>
<body>
<br>
<input id="timeInput" name="timeInput" type="text " length="20">
<h1><div id="time">00:00:00</div></h1>
<div id="result"></div>

<button id="start" onclick ="run(); startButton();" >Start</button>
<button id="stop" onclick="stopTimer(); stopButton();">Stop</button>
<button id="clear" onclick="resetTimer(); resetButton();">Reset</button>

<!-- Debug Output -->
<br>
<br>
<br>
<div id="buttons">
    <span id="mode">DEBUG MODE:</span>
    <span id="debugOn" onclick="turnOn();">On</span>
    <span id="debugOff" onclick="turnOff();">Off</span>
    <span id="clear2" onclick="clearOutput();">Clear</span>
</div>
<br>
<br>
<br>
<br>

<div id="debugOutput">

</div>



 <script type="text/javascript" src="part3.js"></script>
</body>
</html>

JS:

var currentTime = document.getElementById('time');

var t2;

function timer2() {
    t2 = setTimeout(add2, 10);
}

function addTime() {

userTime = timeInput.value;

regex = /^\d{2}\:\d{2}\:\d{2}$/;



if (regex.test(userTime)) {

timeString = userTime.toString();
timeArray = timeString.split("");
hundrethsValue = timeArray[6].concat( timeArray[7]);
secondsValue = timeArray[3].concat(timeArray[4]);
minutesValue = timeArray[0].concat(timeArray[1]);

hundreths = hundrethsValue;
seconds = secondsValue;
minutes = minutesValue; 



document.getElementById("time").innerHTML = minutes + ":" + seconds + ":" + hundreths;
}

else {
    alert("Please enter a time in the ##:##:## format");
}

} // end function addTime



function add2() {

  hundreths--;
        if (hundreths < 1) {
            hundreths = 99;

            seconds--;
            if (seconds < 1) {
                seconds = 59;
                minutes--;
            }
            if(minutes < 0) {
                hundreths = 0;
                seconds= 0;
                minutes= 0;
              clearTimeout(t);


            }

        }


if (hundreths > 9 && seconds < 9) {
currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + hundreths;
  }
else if ((seconds > 9 ) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
}
else if((seconds > 9) && (hundreths > 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
}
else if ((minutes > 9) && (seconds < 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}

else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
}

else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
}

else {
currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}

   timer2();
} // end function add();




var hundreths = 0;
var seconds = 0;
var minutes = 0;
var t;

function timer() {
        t = setTimeout(add, 10);
    }

function add() {



        hundreths++;
        if (hundreths > 99) {
            hundreths = 0;
            seconds++;
            if (seconds > 59) {
                seconds = 0;
                minutes++;
            }
            if (minutes >= 10) {
                seconds = 0;
                minutes = 0;
                stopTimer();

            }
        }



        if (hundreths > 9 && seconds < 9) {
            currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + hundreths;
        } else if ((seconds > 9) && (hundreths < 9)) {
            currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
        } else if ((seconds > 9) && (hundreths > 9)) {
            currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
        } else if ((minutes > 9) && (seconds < 9) && (hundreths < 9)) {
            currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
        } else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
            currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
        } else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
            currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
        } else {
            currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
        }

        timer();
    }

function stopTimer() {
    document.getElementById("result").innerHTML = "<p>" + ("Your time is: " + minutes + " minutes, " + seconds + " seconds, " + "and " + hundreths + " hundreths") + "</p>";
  clearTimeout(t);  
  clearTimeout(t2);


} // end function stopTimer();


function resetTimer() {
  hundreths = 0;
  seconds = 0;
  minutes = 0;

  currentTime.innerHTML = "00:00:00";
  clearTimeout(timer); 
  clearTimeout(timer2);
} // end function resetTimer();


function run() {
  if(document.getElementById("timeInput").value.length > 0) {
    addTime();
    add2();

  }
else {
  add();
}

} // end function run();

function turnOn() {
    document.getElementById("debugOutput").style.visibility = "visible";
    document.getElementById("debugOff").style.backgroundColor = "#b7f3ff";
    document.getElementById("clear2").style.backgroundColor = "#b7f3ff";
}

function turnOff() {
    document.getElementById("debugOutput").style.visibility = "hidden";
    document.getElementById("debugOff").style.backgroundColor = "#dae4ea";
    document.getElementById("clear2").style.backgroundColor = "#dae4ea";

document.getElementById("debugOutput").innerHTML = " "; 
}

function clearOutput() {
 document.getElementById("debugOutput").innerHTML = " "; 
    document.getElementById("clear2").style.backgroundColor = "#b7f3ff";
}

// DEBUG OUTPUT


function startButton() {


  var newPar = document.createElement("p");
  var startText = document.createTextNode("User has clicked START");
  newPar.appendChild(startText);
  var divOutput = document.getElementById("debugOutput");
  divOutput.appendChild(newPar);

    if(document.getElementById("timeInput").value.length < 1) {

       var newPar = document.createElement("p");
       var countupText = document.createTextNode("User selected the COUNT UP timer");
        newPar.appendChild(countupText);
        var divOutput = document.getElementById("debugOutput");
        divOutput.appendChild(newPar);

    } // end if statement

    else {

    // if(document.getElementById("timeInput").value.length > 0) {


   var newPar = document.createElement("p");
  var countdownText = document.createTextNode("User selected the COUNT DOWN timer");
  newPar.appendChild(countdownText);
  var divOutput = document.getElementById("debugOutput");
  divOutput.appendChild(newPar);



        if(regex.test(userTime)) {


           var newPar = document.createElement("p");
           var correctText = document.createTextNode("Time is entered in correct format");
            newPar.appendChild(correctText);
           var divOutput = document.getElementById("debugOutput");
            divOutput.appendChild(newPar);


            }

            else {

              var newPar = document.createElement("p");
              var incorrectText = document.createTextNode("Time was NOT entered in correct format - user was notified");
              newPar.appendChild(incorrectText);
              var divOutput = document.getElementById("debugOutput");
              divOutput.appendChild(newPar);    

            }
    } // end else statement


} // end function startButton()




function stopButton() {


  var newPar = document.createElement("p");
  var stopText = document.createTextNode("The user stopped the time at: " + minutes + " minutes, " + seconds + " seconds, " + "and " + hundreths + " hundreths");
  newPar.appendChild(stopText);
  var divOutput = document.getElementById("debugOutput");
  divOutput.appendChild(newPar);

} // end function stopTime();


function resetButton() {

  var newPar = document.createElement("p");
  var parText = document.createTextNode("User has reset the timer");
  newPar.appendChild(parText);
  var divOutput = document.getElementById("debugOutput");
  divOutput.appendChild(newPar);
}

最佳答案

您可以使用正则表达式来实际验证此数字，以下正则表达式将禁止输入大于 10:00:00 的值:

^(?:0[0-9]:[0-5][0-9]:[0-9]{2}|10:00:00)$

Regex demo可以在这里检查。

这是工作片段:

var currentTime = document.getElementById('time');

var t2;

function timer2() {
    t2 = setTimeout(add2, 10);
}

function addTime() {

userTime = timeInput.value;

regex = /^(?:0[0-9]:[0-5][0-9]:[0-9]{2}|10:00:00)$/;



if (regex.test(userTime)) {

timeString = userTime.toString();
timeArray = timeString.split("");
hundrethsValue = timeArray[6].concat( timeArray[7]);
secondsValue = timeArray[3].concat(timeArray[4]);
minutesValue = timeArray[0].concat(timeArray[1]);

hundreths = hundrethsValue;
seconds = secondsValue;
minutes = minutesValue; 



document.getElementById("time").innerHTML = minutes + ":" + seconds + ":" + hundreths;
}

else {
    alert("Please enter a time in the ##:##:## format. Make sure the value is equal or less than 10:00:00.");
}

} // end function addTime



function add2() {

  hundreths--;
        if (hundreths < 1) {
            hundreths = 99;

            seconds--;
            if (seconds < 1) {
                seconds = 59;
                minutes--;
            }
            if(minutes < 0) {
                hundreths = 0;
                seconds= 0;
                minutes= 0;
              clearTimeout(t);


            }

        }


if (hundreths > 9 && seconds < 9) {
currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + hundreths;
  }
else if ((seconds > 9 ) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
}
else if((seconds > 9) && (hundreths > 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
}
else if ((minutes > 9) && (seconds < 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}

else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
}

else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
}

else {
currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}

   timer2();
} // end function add();




var hundreths = 0;
var seconds = 0;
var minutes = 0;
var t;

function timer() {
        t = setTimeout(add, 10);
    }

function add() {



        hundreths++;
        if (hundreths > 99) {
            hundreths = 0;
            seconds++;
            if (seconds > 59) {
                seconds = 0;
                minutes++;
            }
            if (minutes >= 10) {
                seconds = 0;
                minutes = 0;
                stopTimer();

            }
        }



        if (hundreths > 9 && seconds < 9) {
            currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + hundreths;
        } else if ((seconds > 9) && (hundreths < 9)) {
            currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
        } else if ((seconds > 9) && (hundreths > 9)) {
            currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
        } else if ((minutes > 9) && (seconds < 9) && (hundreths < 9)) {
            currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
        } else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
            currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
        } else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
            currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
        } else {
            currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
        }

        timer();
    }

function stopTimer() {
    document.getElementById("result").innerHTML = "<p>" + ("Your time is: " + minutes + " minutes, " + seconds + " seconds, " + "and " + hundreths + " hundreths") + "</p>";
  clearTimeout(t);  
  clearTimeout(t2);


} // end function stopTimer();


function resetTimer() {
  hundreths = 0;
  seconds = 0;
  minutes = 0;

  currentTime.innerHTML = "00:00:00";
  clearTimeout(timer); 
  clearTimeout(timer2);
} // end function resetTimer();


function run() {
  if(document.getElementById("timeInput").value.length > 0) {
    addTime();
    add2();

  }
else {
  add();
}

} // end function run();

function turnOn() {
    document.getElementById("debugOutput").style.visibility = "visible";
    document.getElementById("debugOff").style.backgroundColor = "#b7f3ff";
    document.getElementById("clear2").style.backgroundColor = "#b7f3ff";
}

function turnOff() {
    document.getElementById("debugOutput").style.visibility = "hidden";
    document.getElementById("debugOff").style.backgroundColor = "#dae4ea";
    document.getElementById("clear2").style.backgroundColor = "#dae4ea";

document.getElementById("debugOutput").innerHTML = " "; 
}

function clearOutput() {
 document.getElementById("debugOutput").innerHTML = " "; 
    document.getElementById("clear2").style.backgroundColor = "#b7f3ff";
}

// DEBUG OUTPUT


function startButton() {


  var newPar = document.createElement("p");
  var startText = document.createTextNode("User has clicked START");
  newPar.appendChild(startText);
  var divOutput = document.getElementById("debugOutput");
  divOutput.appendChild(newPar);

    if(document.getElementById("timeInput").value.length < 1) {

       var newPar = document.createElement("p");
       var countupText = document.createTextNode("User selected the COUNT UP timer");
        newPar.appendChild(countupText);
        var divOutput = document.getElementById("debugOutput");
        divOutput.appendChild(newPar);

    } // end if statement

    else {

    // if(document.getElementById("timeInput").value.length > 0) {


   var newPar = document.createElement("p");
  var countdownText = document.createTextNode("User selected the COUNT DOWN timer");
  newPar.appendChild(countdownText);
  var divOutput = document.getElementById("debugOutput");
  divOutput.appendChild(newPar);



        if(regex.test(userTime)) {


           var newPar = document.createElement("p");
           var correctText = document.createTextNode("Time is entered in correct format");
            newPar.appendChild(correctText);
           var divOutput = document.getElementById("debugOutput");
            divOutput.appendChild(newPar);


            }

            else {

              var newPar = document.createElement("p");
              var incorrectText = document.createTextNode("Time was NOT entered in correct format - user was notified");
              newPar.appendChild(incorrectText);
              var divOutput = document.getElementById("debugOutput");
              divOutput.appendChild(newPar);    

            }
    } // end else statement


} // end function startButton()




function stopButton() {


  var newPar = document.createElement("p");
  var stopText = document.createTextNode("The user stopped the time at: " + minutes + " minutes, " + seconds + " seconds, " + "and " + hundreths + " hundreths");
  newPar.appendChild(stopText);
  var divOutput = document.getElementById("debugOutput");
  divOutput.appendChild(newPar);

} // end function stopTime();


function resetButton() {

  var newPar = document.createElement("p");
  var parText = document.createTextNode("User has reset the timer");
  newPar.appendChild(parText);
  var divOutput = document.getElementById("debugOutput");
  divOutput.appendChild(newPar);
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>User Input Timer</title>

</head>
<body>
<br>
<input id="timeInput" name="timeInput" type="text " length="20">
<h1><div id="time">00:00:00</div></h1>
<div id="result"></div>

<button id="start" onclick ="run(); startButton();" >Start</button>
<button id="stop" onclick="stopTimer(); stopButton();">Stop</button>
<button id="clear" onclick="resetTimer(); resetButton();">Reset</button>

<!-- Debug Output -->
<br>
<br>
<br>
<div id="buttons">
    <span id="mode">DEBUG MODE:</span>
    <span id="debugOn" onclick="turnOn();">On</span>
    <span id="debugOff" onclick="turnOff();">Off</span>
    <span id="clear2" onclick="clearOutput();">Clear</span>
</div>
<br>
<br>
<br>
<br>

<div id="debugOutput">

</div>



 <script type="text/javascript" src="part3.js"></script>
</body>
</html>

关于javascript - 检查输入的时间值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29593645/

上一篇：javascript - 如何将对象中的 unix 时间戳日期格式化为 Handlebars.js 模板？

下一篇：javascript - 使用 sortable 获取列表内的值

相关文章：

javascript - 展开三元语句或切换到 if-else

python - 匹配两个 Python 字符串中的字符

swift - 索引(: Int) method of Range in swift return incorrect value

javascript - javascript 中的变量与命名空间

javascript - React highcharts中的世界地图路径数据

regex - grok 的自定义正则表达式

javascript - 通过javascript更改宽度时输入范围的奇怪行为

php - 测试一个范围是否与另一个数字范围相交

javascript - getJSON 覆盖 HTML 背景颜色

正则表达式匹配第一次出现之前和最接近字符串

©2024 IT工具网  联系我们