支持限制文本输入的Javascript mm:ss格式倒计时计时器

Question

我完成了倒计时计时器，但我遇到了一些问题，我想解决。我找不到任何解决我的问题的方法。在Stackoverflow和Youtube上。

计时器输入不需要字母或特殊字符。不转到负数，甚至负数不能粘贴到输入中。

我遇到并且无法解决的问题:计时器输入只需要几秒钟

我正在努力实现:使输入采取mm:ss格式，并使用户能够编辑它的需要。

我正在考虑的可能选项:我认为唯一可行的选项之一是创建两个不同的“幽灵”输入。其中用户将键入他的值，例如: textInput-1 (分钟)8 textInput-2 (秒) 23。结果: 8:23。它将被发送并在定时器上显示。

我确信我要实现的目标是可能的，但我可能遗漏了一些东西。

谢谢您的任何帮助或advice.Have美好的一天！

马丁。

Answer 1

你的问题不是很清楚--也许一些代码会有所帮助。基本上，你想要的任何控件(不存在的控件)都可以快速构建。您可以使用所需的任何控件快速构建时间输入。这只是一个关于可以构建什么的想法。它是自定义的，你可以操纵任何你想要的控件

<style type='text/css'>
.custom-timer{
  display:flex;
  background-color:white;
  border: 1px solid gray;
}

.custom-timer .input{
  border:0;
  width:32px;
  background-color:transparent;
}
.custom-timer .separator{
  margin:0 7px;
}

.custom-timer .separator::before{
  content: ":"
}
</style>

<div class='custom-timer'><input type='text' class='min input'><span 
class='separator'></span><input type='text' class='sec input'></div>

<script type="text/javascript">
   function countDown(){
      let sec=document.querySelector(".custom-timer .sec"), 
 min=document.querySelector(".custom-timer .sec");
 let sec_val= sec.value, min_val=min.value;
 sec_val--;
 if(sec_val <0){
   sec_val=60;
   min_val--;
 }
 sec.value= sec_val;
 min.value= min_val
   }
</script>

添加的脚本是为了回答评论中的最后一个问题