A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© mangoboy 中级黑马   /  2018-9-22 15:24  /  1636 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 mangoboy 于 2018-9-22 15:51 编辑

第一步:下载jquery.js 附:http://code.jquery.com/jquery-2.1.4.min.js 第二步:编写页面代码,引入jquery.min.js如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">// 第二步:换成你的本地jq资源路径
<script src="js/jquery.min.js"></script>
<body>
<input type="text" name="tel" placeholder="请输入你的手机号码" />
<input type="button" id="btn" value="获取验证码" />
</body>
</html>


第三步:
为你的发送验证码按钮绑定事件
<script type="text/javascript">
// 初始化倒计时时间
var countdown=60;
function sendMsmCode(){
    var dom = $("#btn");
    settime(dom);   
}
//发送验证码倒计时
function settime(dom) {
    // 倒计时结束出口
    if (countdown == 0) {
        dom.attr('disabled',false);
        //dom.removeattr("disabled");
        dom.val("获取验证码");
        countdown = 60;
        return;
    } else {
        // 正在倒计时中
        dom.attr('disabled',true);
        dom.val("重新发送(" + countdown + ")");
        countdown--;
    }
    // 每一秒执行一次
    setTimeout(function() {
        settime(dom)
    },1000)
}
</script>


效果如下:
点击前

点击后



微信图片_20180922152135.png (7.99 KB, 下载次数: 29)

微信图片_20180922152135.png

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马