Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            text-align: center;
            margin: 20% auto;
        }
        #input-text{
            padding: 5px 10px;
        }
        #send{
            background: #0c80ba;
            height: 30px;
            text-align: center;
            border: none;
            width: 80px;
            color: #fff;
        }
    </style>
    <script>
        var is_mobile=function (str) {
            return /^(86)?1[3,4,5,7,8]\d{9}$/.test(str);
        };
        var interVal=function (o) {
            var that = this;
            var _secs = 60;
            var sendbtn=document.getElementById('send');
            var text=document.getElementById('input-text');
            if(!is_mobile(text.value)){
                alert('请输入合法手机号');
            }else{
                sendbtn.innerText=_secs + 's';
                sendbtn.disabled=true;
                that = setInterval(function () {
                    _secs--;
                    sendbtn.innerText=_secs + 's';
                    if (_secs <= 0) {
                        sendbtn.innerText='重新发送';
                        sendbtn.disabled=false;
                        clearInterval(that);
                    }
                }, 1000);
            }
        };
    </script>
</head>
<body>
<input type="text" id="input-text" placeholder="请输入">
<button type="button" id="send" onclick="interVal()">发送</button>
</body>
</html>