获取验证码,倒计时JS特效,通过传参修改数值

tuihou123321
tuihou123321 发布于 5 天前 浏览:167 类型:原创 - 随笔 分类:JavaScript - 常用代码 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>定时器倒计时</title>
    <!-- <script src="jquery-1.10.1.min.js"></script> -->
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<style>

#authCode{
    width:80px;
    height:22px;
    text-align:center;
    line-height:22px;
    background:#ffe8bb;
    display:inline-block;
    border-radius:4px;
    font-size:12px;
    cursor:pointer;
    color:#ff6600;
}

#authCode:hover{
    background:#ebd4a8;
}

#authCode2{
      width:80px;
    height:22px;
    text-align:center;
    line-height:22px;
    background:#e5e5e5;
    display:inline-block;
    border-radius:4px;
    font-size:12px;
    cursor:pointer;
    color:#777;
    display:none;
}

</style>

<body>
<div id="authCode">获取验证码</div>
<div id="authCode2"><span id="timeNum"></span>s秒重发</div>

<script type="text/javascript">

function authCode(time){
    return function(){
   // 初始化值;
    var obj1= $("#authCode");
    var obj2=$("#authCode2");
    var timeNum= $("#timeNum");
    // 显示倒计时内容;
    obj1.hide();
    obj2.show();
    timeNum.text(time);
    // 存储变量的值,下次点击可以再次调用以前的值;
    var copyTime=time;
    var t=setInterval(function(){
        time--;
        if(time>0){
            timeNum.text(time);
        }
        else{
             clearInterval(t);
             obj1.show();
             obj2.hide();
             time=copyTime;
        }
     },500);
    }
}

$("#authCode").on("click",authCode(5));

</script>
</body>
</html>
z
给个赞 2 人点赞
收藏 5 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
tuihou123321 tuihou123321 作者

作者最新