支持限制文本输入的Javascript mm:ss格式倒计时计时器
支持限制文本输入的Javascript mm:ss格式倒计时计时器
提问于 2020-07-18 17:16:11
我完成了倒计时计时器，但我遇到了一些问题，我想解决。我找不到任何解决我的问题的方法。在Stackoverflow和Youtube上。
计时器输入不需要字母或特殊字符。不转到负数，甚至负数不能粘贴到输入中。
我遇到并且无法解决的问题:计时器输入只需要几秒钟
我正在努力实现:使输入采取mm:ss格式，并使用户能够编辑它的需要。
我正在考虑的可能选项:我认为唯一可行的选项之一是创建两个不同的“幽灵”输入。其中用户将键入他的值，例如: textInput-1 (分钟)8 textInput-2 (秒) 23。结果: 8:23。它将被发送并在定时器上显示。
我确信我要实现的目标是可能的，但我可能遗漏了一些东西。
谢谢您的任何帮助或advice.Have美好的一天！
马丁。
回答 1
Stack Overflow用户
发布于 2020-07-18 17:59:25
你的问题不是很清楚--也许一些代码会有所帮助。基本上，你想要的任何控件(不存在的控件)都可以快速构建。您可以使用所需的任何控件快速构建时间输入。这只是一个关于可以构建什么的想法。它是自定义的，你可以操纵任何你想要的控件
<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>添加的脚本是为了回答评论中的最后一个问题
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62966774
复制相关文章
相似问题
腾讯云开发者
