自定义倒计时

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>countdowntitle>
    <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设置成只能点击一次。但是这样设计不一定合理;换一种思路,也可以将定时器设置成一次性定时器。
刚才试了一下,第二种没成功;
下来再想吧。

你可能感兴趣的:(js)