自定义倒计时

来源：互联网发布：网络机房线很乱编辑：程序博客网时间：2024/06/06 19:15

英语专业转前端。
好热啊。无聊死了。写了以下几行，下来如果有空再修改。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>countdown</title>    <style>        input{            display:inline-block;            width:60px;            height:60px;            background:#ddd;            /*outline:#000 dashed 2px;*/            border-radius:50%;            box-sizing: border-box;            padding-left:15px;        }    </style></head><body><div>    <label for="#countdownN">请输入倒计时的秒数        <input type="number" id="countdown">        <button id="start">倒计时开始</button>    </label></div><script>    var countdown=document.getElementById("countdown");    start.onclick=function(){        var countNu=countdown.value;        console.log(countNu);        if(Number(countNu)<1){            alert("请输入数字")        }        else{            clearInterval(timer);            var timer=setInterval(function(){                if(countNu<=0){                    clearInterval(timer)                }else{                    countdown.value= countNu--;                }            },1000)        }    }</script></body></html>

说几个问题：
1.ie中仍然可以输入as,“啊”等非数字，所以才有了alert提示，但总感觉我考虑的不周全。
2.input输入获取的是字符串，需要转换成数字。
3.点击开始倒计时，再次点击按钮，则倒计时加速，可以考虑将btn设置成只能点击一次。但是这样设计不一定合理；换一种思路，也可以将定时器设置成一次性定时器。
刚才试了一下，第二种没成功；
下来再想吧。

阅读全文

0 0