Question

我必须创建一个组合秒表和倒数计时器，并使用正则表达式验证倒计时的时间格式（00:00:00）。我尝试使用var regex = / ^ \ d {0-2}：\ d {0-2}：\ d {0-2} $ /;但一直无效。不确定正则表达式代码是错误还是我在错误的地方？也应该在下面的div区域中显示事件输出，但是所有内容都会出现在＆＃34; undefined＆＃34;至今。完全迷茫，并会欣赏任何想法。非常感谢！

＆＃13;

   // start stopwatch function and declare variables
        var hundr = 10;
        var minutes = 0;
        var seconds = 0;
        var stopwatch = 0;

    // begin stopwatch
       function startStopwatch(){
       "use strict";
        stopwatch = setInterval('setUp()', 100); 
       }
          

    // function to show if the timer reaches 60 seconds, display an alert that says "Time up!" Otherwise, continue incrementing hundredths/seconds
    function setUp(){
    var setTime = document.getElementById('output');
        hundr+=10;
        if (hundr == 100) {
        seconds++;
        hundr = 0;
        }
        if (seconds == 60) {
        minutes++;
        seconds = 0;
        setTime.innerHTML = "Time up!";
        clearInterval(stopwatch);
        return;
}

        // if/else statement to display stopwatch - if number of seconds/minutes are less than 10, display a zero.
        if(seconds < 10){
        setTime.innerHTML = '0' + minutes + ':0' + seconds + ':' + hundr;
        } else {
        setTime.innerHTML = '0' + minutes + ':' + seconds + ':' + hundr;
        }	
        if(hundr < 10) {
        setTime.innerHTML = '0' + minutes + ':0' + seconds + ':0' + hundr;
       } else {
        setTime.innerHTML = '0' + minutes + ':0' + seconds + ':' + hundr;
    }}
       

    // start countdown function and declare variables
        var ms = 99;
        var mins = 0;
        var secs = 60;
        var countdown = 0;

    function startCountdown(){
        "use strict";        
        countdown = setInterval('incrTimer()', 10);
        }

    function incrTimer(){
        "use strict";

    var regMatch = document.getElementById("output").value;
    var regex = /^\d{0-2}:\d{0-2}:\d{0-2}$/;    
        if (regex.test(regMatch)) { 
           document.getElementById("debug").innerHTML = "valid";
        } else {
           document.getElementById("debug").innerHTML = "invalid - please check your code";
        }
        var setCountd = document.getElementById('output');
        ms--;
        if (ms == -1) {
        secs--;
        ms = 99;
        } 
        if(secs == -1){
        min--;
        secs = 59;
        setCountd.innerHTML = "Time up!";
        clearInterval(countdown);
        alert('Time up');
        return;
    }

        // if/else statement to display countdown - if number of seconds/minutes are less than 10, display a zero in front of number.
        if(secs > 10){
        setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
        } else {
        setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
        }	
        if(ms < 10) {
        setCountd.innerHTML = '0' + mins + ':' + secs + ':0' + ms;
       } else {
        setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
    }}

       // end function incrTimer()


function stopTimer() { // pauses the output for both the stopwatch and the countdown timer
    clearTimeout(stopwatch);
    clearTimeout(countdown);
    } // end function stopTimer()

function clearOutput() { // clear output and restore div area
            document.getElementById("output").innerHTML = "";
    } // end function clearOutput

＆＃13;

#output{
    width:300px;
    height:25px;
    background-color: #e4e3db;
    border:1px solid #c3c4bc;

}

span {
    padding: 5px 10px 5px 10px;
    background-color: #00FFFF;
}




h2 {
    font-family: Arial;
    color: #799b3d;
}

h4 {
    font-family: Arial;
    font-style: italic;
    color: #1f8da8;
}

#debug {
    border: 1px solid red;
    width: 620px;
    padding: 10px;
    font-size: small;
    color: blue;
    background-color: #FFFF99;
}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Final</title>
	<link rel="stylesheet" type="text/css" href="final.css">
        <script type="text/javascript" src="take7.js"></script>


</head>

<body>
<h2>Stopwatch or Countdown Timer</h2>
	<div id="output" ></div>
<p>&nbsp;</p>


    <span id="stopwatch_output" onclick="startStopwatch()">Stopwatch</span>
    <span id="countdown_output" onclick="startCountdown()">Countdown</span>		
    <span id="timerstop" onclick="stopTimer()">STOP</span>
    <span id="resettimer" onclick="clearOutput()">RESET</span>
<p>&nbsp;</p>
    <p><span id="debugOnOff" style="visibility:visible">Debug on/off</span>
       <span id="hideDebug" style="visibility:visible">Hide Debug</span>
<div id="debug"><p id="firstP">This space is reserved for event output information.</p></div>
</body>

</html>

＆＃13;

Answer 1

如果要检查带有和不带前导零的计时器值，可以使用此正则表达式：

([0-9]+):([0-5]?[0-9]):([0-5]?[0-9])

01:1:01或1:1:1返回true，但1::1或::

不返回

Answer 2

问题是一个小问题：

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

要指定零到两位数的匹配（一两个会更好吗？），请使用逗号作为分隔符：

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

这是一个很容易忽视的拼写错误！

使用正则表达式验证时间格式

2 个答案: