点击按钮获取短信验证码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>点击按钮获取短信验证码</title>

<link rel="stylesheet" href="css/date.css">

</head>
<body>

<h3>下面点击按钮获取验证码</h3>
<input><button type="button" id="cxfs" onclick="time()" >点击获取验证码</button>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.date.js"></script>

<script type="text/javascript">
function time(){
    var count = 60; //间隔函数,1秒执行
    var curCount = 0; //当前剩余秒数
    var interval;
    curCount = count;
    interval = setInterval(function() {
        if (curCount == 0) {
            $("#cxfs").attr("disabled",false);
            clearInterval(interval); // 停止计时器
            $("#cxfs").html("点击获取验证码");
        } else {
            $("#cxfs").attr("disabled",true);
            curCount--;
            $("#cxfs").html(curCount + "秒");
        }
    }, 1000); // 启动计算器
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

posted @ 2022-08-04 19:12  码奴生来只知道前进~  阅读(6)  评论(0编辑  收藏  举报