时间戳

首页 > 解决方案 > Javascript mm:ss 格式的倒数计时器，文本输入受限

javascript - Javascript mm:ss 格式的倒数计时器，文本输入受限

问题描述

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

定时器输入不采用字母或特殊字符。不会转到负数，甚至不能将负数粘贴到输入中。

我遇到但无法解决的问题：定时器输入只需几秒钟

我想要实现的目标：输入采用 mm:ss 格式，并且用户能够根据需要对其进行编辑。

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

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

感谢您的任何帮助或建议。祝您有美好的一天！:-)

马丁。

标签： javascripttimercountdown

解决方案

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

<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>

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

推荐阅读