Question

我创建了一个工作时间管理员。计时器是静态的，因为我们还有另一个程序记录时间，该程序仅在后端记录其时间。我没有花时间跟经理打交道，而是想到可以使用此计时器。

该脚本有一个问题：如果将输入字段保留为空白，然后按Enter键，它将返回一个空白值，并以某种方式通过“ NaN：NaN”检查：

  if (element1 == "NaN:NaN") {

alert("This is not a valid number. Please use the following format: 2:36");
      return document.getElementById("time1").innerHTML = "50:00"; 

}

else {
return document.getElementById("time1").innerHTML = element1;}
}

如果使用小数点而不是冒号输入1.23而不是1:23，则脚本将中断并显示“ NaN：NaN”。 NaN检查似乎没有覆盖空白或空值。

这是完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<style>



.button {
  display: inline-block;
  padding: 4px 12px;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #060606;
  border: none;
  border-radius: 5px;
  box-shadow: 0 4px #000000;
}

.button:hover {background-color: #101010}

.button:active {
  background-color: ##000000    ;
  box-shadow: 0 3px #080808;
  transform: translateY(4px);
}
}
#time2 { width: 90px; height: 390px; border: 1px solid #999999; padding: 5px; }

@import url('https://fonts.googleapis.com/css?family=Dosis');

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 10px;

}


.Wrapper {
  flex: 0 0 20%;
  max-width: 20%;
}



.Input {
  position: relative;
  align: center;
}


.Input-text::placeholder {
  color: #B0BEC5;
}

.Input-text:focus {
  outline: none;
  box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600);
}


</style>


<script type="text/javascript">


    function setTimes(info) {
  var sel = info.split('|');
  document.getElementById('time1').value = sel[0];
  document.getElementById('time2').value = sel[1];

}

</script>
<title> Personal Time Keeper</title>
</head>
<body bgcolor="#000000">
<br><br>
<div align="center"><br><br>
<br><br><br><br><br>
<font size="50" face="Verdana" color="white">
<h1 id="time1"><script>document.getElementById("time1").innerHTML = "50:00"</script>
</h1>

    <font size="3" face="verdana" color="gray">

    <input type="text" id="time2" class="Input-text" placeholder="Ex: 2:36">


</h1><br>
<button class="button"  onclick="document.getElementById('time1').innerHTML = timeAddSub('time1','time2',false);" >
Enter
</button>



<script type="text/javascript">

Number.prototype.padDigit = function() { return (this < 10) ? '0'+this : ''+this; }

function timeAddSub(id1, id2, flag) {  // flag=true to add values and flag=false to subtract values
  var p = document.getElementById(id1);

  var tt1 = p.textContent;  if (tt1 == '') { return ''; }
  var t1 = tt1.split(':');
  var tt2 = document.getElementById(id2).value;  if (tt2 == '') { return ''; }
  var t2 = tt2.split(':');
  tt1 = Number(t1[0])*60+Number(t1[1]);
  tt2 = Number(t2[0])*60+Number(t2[1]);
  var diff = 0;  if (flag) { diff = tt1 + tt2; } else { diff = tt1 - tt2; }
  t1[1] = Math.abs(diff % 60).padDigit();                        // form minutes
  t1[0] = Math.abs(Math.floor(parseInt(diff / 60))).padDigit();  // form hours
  var tt1 = '';  if (diff < 0) { tt1 = '-'; } 
  // check for negative value
var element1 = tt1+t1.join(':');


  if (element1 == "NaN:NaN") {

alert("This is not a valid number. Please use the following format: 2:36");
      return document.getElementById("time1").innerHTML = "50:00"; 

}

else {

return document.getElementById("time1").innerHTML = element1;}

}
</script>
</font>
</body>
</html>

我尝试将“ NaN：NaN”更改为null，更改为“”。我不确定是否在正确的位置。

Answer 1

首先，您应验证输入内容是否为空

您可以更改var tt2 = document.getElementById(id2).value; if (tt2 == '') { return ''; }

var tt2 = document.getElementById(id2).value;  
if (tt2 == '') { 
  alert("This is not a valid number. Please use the following format: 2:36");
 return document.getElementById("time1").innerHTML = "50:00"; 
}

Answer 2

您对“ NaN：NaN”-检查对于该任务过于具体是非常正确的。但是，我们可以通过添加一些正则表达式来测试来解决此问题。以下代码将评估该值是否为有效格式，而不是检查一种类型的错误结果。

var timePattern = new RegExp("[0-9]{1,2}[:.][0-9]{1,2}")
if(!timePattern.test(element1)){
    //Here we do error handling code
}

这里似乎还有进一步改进的空间。例如，您可能想通过将拆分函数更改为使用正则表达式的函数来使“ .”成为有效的输入分隔符。

var t1 = tt1.split(/:|\./);

现在，该字符将以冒号或句点分隔。由于代码稍后将使用特殊的冒号连接元素，因此在此分隔其他字符以后不会导致任何问题。

空输入中断计时器

2 个答案:

首先，您应验证输入内容是否为空